まとめ：ルーティング
CoddyのReactジャーニー「Next.js の基本」セクションの一部。レッスン 10/47。
チャレンジ
中級章のまとめ：この章で学んだすべてを使って、1ページのアプリを小さなサイトに変えましょう。
app/about/page.jsx（ファイル一覧にはすでにあります）で、component がid="about-title"を持つ<h1>と、正確なテキストAbout usを返すようにします。app/page.jsxでnext/linkからLinkを import し、id="to-about"を持つ/aboutへのリンクを追加します。- 動的ルート
app/menu/[slug]/page.jsxはすでにありますが、常にpizzaを表示します。component をasyncにしてparamsを await し、一致したslugをid="dish"を持つ<h1>内に表示するようにします。
テストではリンクをクリックしてから、異なる2つの料理のページにアクセスし、異なる2つの見出しが表示されることを期待します。
自分で試してみよう
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}