Menu
Coddy logo textTech

まとめ:ルーティング

CoddyのReactジャーニー「Next.js の基本」セクションの一部 — レッスン 10/47。

challenge icon

チャレンジ

中級

章のまとめ:この章で学んだすべてを使用して、1ページのアプリを小規模なサイトに変換します。

  1. app/about/page.jsx を作成します。id="about-title" と正確なテキスト About us を持つ <h1> を返すコンポーネントを default エクスポート(export)します。
  2. app/page.jsx 内で、next/link から Linkimport し、id="to-about" を持つ /about へのリンクを追加します。
  3. 動的ルート app/menu/[slug]/page.jsx を作成します:paramsawait し、一致した slugid="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>
    );
}

Next.js の基本のすべてのレッスン