중첩된 라우트

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를 넣으세요. 사이트가 커져도 이 패턴은 변하지 않으며, 이것이 바로 핵심입니다.

챌린지

초급

앱에 홈 페이지가 있습니다. 어바웃(about) 페이지를 추가하세요.

app/about/page.jsx 파일을 생성하세요.
해당 파일에서 컴포넌트를 default export 하세요.
id="about-title" 속성과 정확한 텍스트 About us를 포함하는 <h1>을 return해야 합니다.

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>
    );
}