Next.jsが追加するもの

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

React でコンポーネントを作成できるようになりました。それでは、なぜほぼすべての実際の React アプリは、その上にフレームワークを使用するのでしょうか？

React は単体では、1つの仕事しかしません。それは、コンポーネントを画面に表示されるものへ変換することです。それ以外は、すべて自分で構築します：

ページと URL：React は URL が何なのかまったく理解していません
データの取得：ページがすでに読み込まれた後、ブラウザーでデータを取得します
データの保存：API を手作業で作成します

Next.jsは、まさにそうしたギャップを埋めます。その答えは、爽快なほど率直です：

フォルダーはURLです
コンポーネントはデフォルトでサーバー上で実行されるため、pageが送信される前にデータを読み込めます
functionでデータを保存できるため、APIを書く必要はありません

That 最後のポイントについて、少し立ち止まって考えてみましょう。このコースでは、ユーザーが何かを見る前に component がサーバー上で実行されるため、ローディングスピナーも useEffect も使わず、component 内の単純な await でデータを取得します。

Fundamentalsで学んだことはすべて引き続き当てはまります。これらは同じコンポーネント、同じprops、同じJSXです。Next.jsはそれらを取り囲む土台です。

チャレンジ

初心者

これが、すでに用意されている最初の Next.js page です。

行うこと:

file がどこにあるか確認します: app/page.jsx。
Run ボタンを押します。
プレビューに、その page が URL / に表示されます。

その route を登録したものはありません。登録したのはフォルダーです。これが、このセクション全体の基礎となる考え方です。

自分で試してみよう

import './globals.css';

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

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