最初のページ

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

ページを編集する時間です。 app/page.jsx は通常の React コンポーネントであり、Fundamentals で作成してきたものと同じ種類のものです：

export default function Home() {
    return (
        <main>
            <h1>Welcome!</h1>
        </main>
    );
}

決して変わらない2つの小さなルール：

ページはファイルの default export である必要があります。Next.js はそれによってページを見つけます
コンポーネント名は自由です。URLを決めるのは ファイル名とフォルダ だけです

何がないかに注目してください。ルートの登録も、ルーターのインポートも、ReactDOM.render もありません。適切なファイルにコンポーネントを記述するだけで、それがページになります。

チャレンジ

初心者

ホームページで挨拶をするようにしてください。

app/page.jsx の <main> 内に、id="title" を持つ <h1> を追加します。
そのテキストは正確に Welcome to Next.js である必要があります。

自分で試してみよう

import './globals.css';

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

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