ネストされたルート

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

それでは、実際にやってみましょう。Next.js アプリにページを追加する操作は2つのステップで完了します。フォルダを作成し、その中に page.jsx を配置するだけです。

// app/about/page.jsx   ->  /about
export default function About() {
    return <h1>About us</h1>;
}

ファイルの全体は以上です。更新すべきルートテーブルも、他の場所からの `import` も、再起動するものも何もありません。コンポーネントは通常のReactです。それをURLに変えた唯一の要素は、ファイルを保存した場所でした。

を押さえておくべき2つのポイント：

default export である必要があります。Next.js はこれによってファイルからページコンポーネントを取り出します。
コンポーネント名は自由です。 About、AboutPage、Whatever など何でも構いません。URLはフォルダから決まり、関数名から決まることはありません。

/about/team も追加したいですか？app/about/team/ を作成し、そこに別の page.jsx を配置します。サイトが大きくなってもパターンは変わりません。それが重要なポイントです。

チャレンジ

初心者

アプリにはホームページがあります。about ページを追加しましょう。

ファイル app/about/page.jsx を作成します。
そこからコンポーネントを default エクスポートします。
id="about-title" と正確なテキスト About us を持つ <h1> を return する必要があります。

app/page.jsx は変更しないでください。テストでは両方の URL を訪問します。

自分で試してみよう

import './globals.css';

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

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