ホームページ > 記事 > ウェブフロントエンド > Next.js の概要: 初めてのアプリケーションの構築

Next.js の概要: 初めてのアプリケーションの構築

Susan Sarandonオリジナル: 2024-10-18 22:44:30282ブラウズ

Next.js は、開発者がサーバーでレンダリングされる高速なアプリケーションを作成できるようにする人気の React フレームワークです。静的サイト生成 (SSG)、サーバー側レンダリング (SSR)、API ルートなど、すぐに使用できる強力な機能を提供します。このガイドでは、主要な概念と実践的な例に焦点を当てて、最初の Next.js アプリケーションを構築するプロセスを順を追って説明します。

1. Next.js プロジェクトのセットアップ

Next.js を使い始めるには、マシンに Node.js がインストールされている必要があります。 Node.js をセットアップしたら、次のコマンドを使用して新しい Next.js アプリケーションを作成できます:

npx create-next-app my-next-app

このコマンドは、Next.js アプリケーションを開始するために必要なすべてのファイルと依存関係を含む、my-next-app という新しいディレクトリを作成します。

2. プロジェクト構造内の移動

プロジェクトを作成した後、プロジェクトディレクトリに移動します。

cd my-next-app

my-next-app ディレクトリ内に、次のような構造があります。

my-next-app/
├── node_modules/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── public/
├── styles/
│   ├── Home.module.css
├── package.json
└── README.md

pages ディレクトリはアプリケーションのページを作成する場所であり、public は静的アセット用です。

3. 最初のページの作成

Next.js はファイルベースのルーティングシステムを使用します。新しいページを作成するには、新しい JavaScript ファイルをページディレクトリ内に追加するだけです。たとえば、about.js:
という名前のファイルを作成します。

// pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page of my first Next.js application!</p>
      <Link href="/">Go back home</Link>
    </div>
  );
}

この例では、単純な About ページを作成し、Link コンポーネントを使用してホームページに戻ります。

4. ホームページの変更

pages ディレクトリにあるindex.js ファイルを開きます。このファイルはアプリケーションのホームページを表します。次のように変更できます:

// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <p>
        This is my first application built with Next.js.{' '}
        <Link href="/about">Learn more about me</Link>
      </p>
    </div>
  );
}

ここでは、簡単なスタイルと About ページへのリンクを追加しました。

5. アプリケーションへのスタイルの追加

Next.js は、すぐに CSS モジュールをサポートします。コンポーネントのスタイルを設定するには、styles ディレクトリに CSS モジュールを作成します。たとえば、Home.module.css:
という名前のファイルを作成します。

/* styles/Home.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

次に、前のセクションで示したように、この CSS モジュールをindex.js ページにインポートします。

6. Next.js を使用したデータの取得

Next.js を使用すると、静的サイト生成の場合は getStaticProps を使用し、サーバーサイドレンダリングの場合は getServerSideProps を使用してデータを簡単に取得できます。たとえば、ホームページ上のデータを取得するには、index.js を次のように変更します。

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
  };
}

export default function Home({ posts }) {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

このコードでは、パブリック API から投稿のリストを取得し、ホームページに表示します。

7. APIルートの作成

Next.js を使用すると、pages/api ディレクトリに API ルートを作成できます。これらのルートを使用して、バックエンド機能を構築できます。たとえば、pages/api ディレクトリに hello.js という名前のファイルを作成します。

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API!' });
}

この API ルートにアクセスするには、http://localhost:3000/api/hello に移動します。

8. Next.js アプリケーションのデプロイ

アプリケーションの準備が完了したら、簡単にデプロイできます。 Vercel は、Next.js アプリケーションに推奨されるホスティングプラットフォームです。次の手順に従ってアプリをデプロイできます:

Vercel アカウントをお持ちでない場合は、作成してください。
Vercel CLI をグローバルにインストールします:
```
npx create-next-app my-next-app
```
プロジェクトディレクトリで次のコマンドを実行します:
```
cd my-next-app
```
プロンプトに従ってアプリケーションをデプロイします。

9. 動的ルーティングの追加

Next.js は、括弧を使用した動的ルーティングをサポートしています。たとえば、動的なブログ投稿ページを作成する場合は、pages/posts ディレクトリに [id].js という名前のファイルを作成できます。

my-next-app/
├── node_modules/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── public/
├── styles/
│   ├── Home.module.css
├── package.json
└── README.md

/posts/1、/posts/2 などに移動して、特定の投稿にアクセスできるようになりました。

10. グローバルスタイルの実装

アプリケーションにグローバルスタイルを適用したい場合は、pages ディレクトリに _app.js という名前のファイルを作成することで実行できます。

// pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page of my first Next.js application!</p>
      <Link href="/">Go back home</Link>
    </div>
  );
}

次に、styles ディレクトリに globals.css ファイルを作成し、グローバルスタイルを追加します。

// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <p>
        This is my first application built with Next.js.{' '}
        <Link href="/about">Learn more about me</Link>
      </p>
    </div>
  );
}

11. 環境変数の使用

Next.js は、機密情報を保存するための環境変数をサポートしています。プロジェクトのルートに .env.local ファイルを作成し、変数を追加できます:

/* styles/Home.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

その後、process.env:
を使用してアプリケーションでこの変数にアクセスできます。

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
  };
}

export default function Home({ posts }) {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

最初の Next.js アプリケーションの構築おめでとうございます!この旅を通じて、プロジェクトのセットアップ、動的ページの作成、データのシームレスな取得、堅牢なルーティングの実装、アプリケーションの簡単なデプロイ方法を学びました。

Next.js は単なるフレームワークではありません。これは、Web 開発エクスペリエンスを大幅に向上させる強力なツールです。静的サイト生成 (SSG) やサーバーサイドレンダリング (SSR) などの組み込み機能により、パフォーマンスと SEO に最適化された、高速でユーザーフレンドリーなアプリケーションを作成できます。

Next.js の旅の次のステップ

最初の Next.js アプリケーションの構築に成功したので、スキルを次のレベルに引き上げましょう。この今後の投稿シリーズでは、アプリケーションを強化し、開発プロセスを合理化できる Next.js のより高度な機能のいくつかをさらに詳しく掘り下げていきます。

ミドルウェア は、リクエストが完了する前にカスタムロジックを追加することでアプリケーションの機能を拡張できる強力な機能です。これは、リクエストとレスポンスのオブジェクトを操作したり、ユーザーを認証したり、リダイレクトをシームレスに管理したりできることを意味します。

次に、静的サイト生成 (SSG) について説明します。この手法により、ビルド時にページが事前レンダリングされるため、読み込み速度が速くなり、SEO パフォーマンスが向上します。 SSG の活用方法を理解することで、動的であるだけでなく、驚くほど効率的なアプリケーションを作成できます。

最後に、Next.js アプリケーション内でサーバーレス関数を直接構築できる機能である API ルート について説明します。これは、別のサーバーを必要とせずにリクエストとレスポンスを処理できることを意味し、より少ないオーバーヘッドでフルスタックアプリケーションの開発が容易になります。

Next.js の高度な機能へのこのエキサイティングな旅に乗り出す私に従ってください。これらのツールを自由に使えば、本当に優れた堅牢で高性能なアプリケーションを構築できます。次回の投稿もお楽しみに!

この投稿は次の場所でも読むことができます: