중첩된 라우트

Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨. 47개 중 6번째.

이제 직접 해보세요. Next.js 앱에 페이지를 추가하는 방법은 두 단계입니다. 폴더를 만들고 그 안에 page.jsx를 넣으세요.

// app/about/page.jsx   ->  /about
export default function About() {
    return <h1>About us</h1>;
}

파일 전체가 이것입니다. 업데이트할 라우트 테이블도 없고, 다른 곳에서 가져올 import도 없으며, 다시 시작할 것도 없습니다. 이 컴포넌트는 일반적인 React 컴포넌트입니다. 이것을 URL로 만든 유일한 요소는 파일을 저장한 위치였습니다.

기억해 둘 만한 두 가지 세부 사항:

반드시 default export여야 합니다. 이것이 Next.js가 파일에서 페이지 컴포넌트를 선택하는 방식입니다.
컴포넌트의 이름은 자유롭게 정할 수 있습니다. About, AboutPage, Whatever 등 어떤 이름이든 가능합니다. URL은 폴더에서 결정되며, 함수에서는 절대 결정되지 않습니다.

/about/team도 필요하신가요? app/about/team/을 만들고 그 안에 page.jsx를 하나 더 넣으세요. 사이트가 커져도 패턴은 변하지 않으며, 이것이 핵심입니다.

챌린지

초급

app에는 home page가 있습니다. about page를 추가하세요.

app/about/page.jsx 파일을 완성하세요.
이 파일에서 컴포넌트를 default-export하세요.
<h1>에 id="about-title"을 포함하고 정확한 텍스트 About us를 반환해야 합니다.

app/page.jsx는 그대로 두세요. 테스트는 두 URL을 모두 방문합니다.

직접 해보기

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}