まとめ:ルーティング
CoddyのReactジャーニー「Next.js の基本」セクションの一部 — レッスン 10/47。
チャレンジ
中級章のまとめ:この章で学んだすべてを使用して、1ページのアプリを小規模なサイトに変換します。
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コンポーネントを作成します。
テストはリンクをクリックした後、2つの異なる料理ページにアクセスし、2つの異なる見出しが表示されることを確認します。
自分で試してみよう
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}