Next.js プロジェクト説明

Next.js プロジェクトは複数のファイルとフォルダで構成され、各部分にはそれぞれ特定の役割があります。

以下は Next.js プロジェクトコードの基本的な解説であり、プロジェクトの構造と各部分の機能を理解するのに役立ちます。

Next.js 13 から、Next.js はファイルシステムベースの App Router（app ディレクトリ）を導入し、従来の pages ディレクトリに取って代わりました。新しい app ディレクトリは、ネストされたルーティング、レイアウト、サーバーコンポーネントなど、より強力な機能を提供します。

プロジェクト構造

app ディレクトリを使用する Next.js プロジェクトには通常、以下のファイルとフォルダが含まれます：

my-next-app/
├── node_modules/       # 项目依赖的第三方库
├── public/             # 静态资源文件夹
│   ├── favicon.ico     # 网站图标
│   └── ...             # 其他静态资源（如图片、字体等）
├── app/                # 应用路由目录（核心）
│   ├── layout.js       # 根布局组件
│   ├── page.js         # 首页组件
│   ├── about/          # 关于页面
│   │   └── page.js     # 关于页面组件
│   ├── blog/           # 博客页面
│   │   ├── page.js     # 博客列表页
│   │   └── [slug]/     # 动态路由
│   │       └── page.js # 博客详情页
│   └── ...             # 其他页面和路由
├── components/         # 可复用的 React 组件
├── styles/             # 样式文件
├── utils/              # 工具函数
├── package.json        # 项目配置和依赖管理
├── package-lock.json   # 依赖的精确版本锁定文件
├── next.config.js      # Next.js 配置文件
└── README.md           # 项目说明文档

核心ファイルの解説

app/layout.js

app/layout.jsはルートレイアウトファイルで、アプリ全体のレイアウト構造を定義します。

app/layout.jsすべてのページをラップし、グローバルスタイルやメタデータなどを含めることができます。

実例

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

app/page.js

app/page.jsはホームページファイルで、ルート / に対応します。/。

実例

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js 13!</h1>
    </div>
  );
}

app/about/page.js

app/about/page.jsはアバウトページファイルで、ルート /about に対応します。

実例

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </div>
  );
}

app/blog/[slug]/page.js

app/blog/[slug]/page.jsは動的ルートファイルで、例えば次のような/blog/:slugルートを処理します。

実例

export default function BlogPost({ params }) {
  return (
    <div>
      <h1>Blog Post: {params.slug}</h1>
    </div>
  );
}

app/loading.js

app/loading.jsローディング状態ファイルで、ページ読み込み中にローディング状態を表示します。

実例

export default function Loading() {
  return <p>Loading...</p>;
}

app/error.js

app/error.jsはエラーページファイルで、エラーをキャッチして表示します。

実例

'use client'; // クライアントコンポーネントとしてマーク

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}

app/not-found.js

app/not-found.jsは 404 ページファイルで、見つからないページを表示します。

実例

export default function NotFound() {
  return (
    <div>
      <h2>Page Not Found</h2>
    </div>
  );
}

新機能の解説

1、サーバーコンポーネント（Server Components）

Next.js 13 はデフォルトでサーバーコンポーネントを使用し、クライアント側の JavaScript の読み込み量を削減します。

サーバーコンポーネントはバックエンドデータに直接アクセスでき、追加の API 呼び出しは不要です。

実例

async function getData() {
  const res = await fetch('https://api.example.com/data');
  return res.json();
}

export default async function Page() {
  const data = await getData();
  return <div>{data.message}</div>;
}

2、クライアントコンポーネント（Client Components）

React の状態やブラウザ API を使用する必要がある場合は、コンポーネントをクライアントコンポーネントとしてマークできます。

使用'use client'ディレクティブ。

実例

'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

3、ネストされたレイアウト（Nested Layouts）

app ディレクトリ内にネストされたレイアウトを作成でき、各サブディレクトリには独自のレイアウトファイルを置くことができます。

例：

app/dashboard/layout.js：ダッシュボードページのレイアウト。

app/dashboard/page.js：ダッシュボードページのコンテンツ。

4、ストリーミングレンダリング（Streaming）

Next.js 13 はストリーミングレンダリングをサポートしており、ページの読み込み中にコンテンツを段階的にレンダリングできます。

実例

import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <Suspense fallback={<p>Loading...</p>}>
        <SlowComponent />
      </Suspense>
    </div>
  );
}

プロジェクトを実行する

  1. 開発サーバーを起動する：

    • 実行npm run dev 或 yarn dev、開発サーバーを起動します。

    • ブラウザでアクセスhttp://localhost:3000、アプリを表示します。

  2. 本番環境コードをビルドする：

    • 実行npm run build 或 yarn build、最適化された本番環境コードを生成します。

  3. 本番サーバーを起動する：

    • 実行npm run start 或 yarn start、本番サーバーを起動します。

その他の拡張