ネストされたルート

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

では、実際にやってみましょう。Next.js app にページを追加するには、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/を作成し、そこにもう1つpage.jsxを配置します。サイトが大きくなってもパターンは変わりません。それがポイントです。

チャレンジ
初心者

app にはホーム page があります。about page を追加してください。

ファイル app/about/page.jsx を完成させてください。
そこからコンポーネントを default-export してください。
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>
    );
}

腕試し