Menu
Coddy logo textTech

요약: 라우팅

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

challenge icon

챌린지

중급

챕터 요약: 이 챕터의 모든 내용을 사용하여 한 페이지 앱을 작은 사이트로 변환합니다.

  1. app/about/page.jsx(이미 파일 목록에 있음)에서 component가 id="about-title"과 정확한 텍스트 About us를 포함하는 <h1>을 반환하도록 만드세요.
  2. app/page.jsx에서 next/link로부터 Link를 import하고, id="to-about"와 함께 /about으로 연결되는 링크를 추가하세요.
  3. 동적 라우트 app/menu/[slug]/page.jsx는 이미 있지만 항상 pizza를 표시합니다. component를 async로 만들어 params를 await하고, 일치하는 slugid="dish"가 있는 <h1> 안에 렌더링하세요.

테스트에서는 여러분의 링크를 클릭한 다음 서로 다른 두 가지 dish를 방문하고, 서로 다른 두 제목을 기대합니다.

직접 해보기

import './globals.css';

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

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

Next.js 핵심 (Next.js Essentials)의 모든 레슨