공통 내비게이션

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

내비게이션 바는 레이아웃에 배치하는 클래식한 요소입니다. 한 번 작성하면 모든 라우트에 존재하며, 다시 마운트되지 않습니다.

// app/layout.jsx
import Link from 'next/link';

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

{children}이 위치한 곳을 참고하세요: nav 뒤에 있습니다. 그 앞에 놓는 모든 내용은 페이지 위에 표시되고, 그 뒤에 놓는 모든 내용은 아래에 표시됩니다. 레이아웃은 단지 JSX일 뿐입니다. 유일한 규칙은 {children}이 어딘가에 있어야 한다는 것입니다.

이제 layout은 고정된 파일이 아닌 여러분의 파일입니다. nav를 추가한 다음, 그 아래에서 페이지가 변경되더라도 그대로 유지되는지 확인해 보세요.

챌린지

쉬움

모든 페이지에 표시되는 내비게이션 바를 Coddy Eats에 추가하세요.

app/layout.jsx에서 <body> 안쪽이자 {children} 위에 다음을 추가하세요:

id="nav"를 가진 <nav>
그 안에 id="home-link"와 Home 텍스트를 가진 /로 이동하는 <Link>
그리고 id="menu-link"와 Menu 텍스트를 가진 /menu로 이동하는 <Link>

페이지는 잠겨 있으므로 layout만 수정해야 합니다. 테스트는 이후에 /menu에 방문하여 내비게이션 바가 화면에 여전히 존재하는지 확인합니다.

직접 해보기

import './globals.css';
import Link from 'next/link';

export const metadata = {
    title: 'Coddy Eats',
};

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