요약: 라우팅
Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨 — 47개 중 10번째.
챌린지
중급챕터 요약: 이번 챕터에서 배운 모든 내용을 활용하여 단일 페이지 앱을 소규모 사이트로 전환합니다.
app/about/page.jsx파일을 생성합니다.id="about-title"속성과 정확한 텍스트About us를 가진<h1>을 반환하는 컴포넌트를 default export 하세요.app/page.jsx에서next/link로부터Link를 import 하고,id="to-about"속성을 가진/about으로 이동하는 링크를 추가하세요.- 동적 라우트
app/menu/[slug]/page.jsx를 생성하세요:params를 await 하고 매칭된slug를id="dish"속성을 가진<h1>내부에 렌더링하는async컴포넌트입니다.
테스트는 링크를 클릭한 후, 두 가지 서로 다른 요리 페이지를 방문하여 두 개의 서로 다른 제목을 확인할 것입니다.
직접 해보기
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}