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 (
    

      
About Page
      
This is the about page of my first Next.js application!
      Go back home
    
  );
}

この例では、単純な 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 (
    

      
Welcome to My Next.js App
      

        This is my first application built with Next.js.{' '}
        Learn more about me
      
    
  );
}

ここでは、簡単なスタイルと 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 (
    

      
Welcome to My Next.js App
      

        {posts.map(post => (
          
{post.title}
        ))}
      
    
  );
}

このコードでは、パブリック 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 アプリケーションに推奨されるホスティング プラットフォームです。次の手順に従ってアプリをデプロイできます:

1. Vercel アカウントをお持ちでない場合は、作成してください。

2. Vercel CLI をグローバルにインストールします:
   

   npm install -g vercel
   

3. プロジェクト ディレクトリで次のコマンドを実行します:
   

   vercel
   

4. プロンプトに従ってアプリケーションをデプロイします。

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

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

// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return 
Post: {id}
;
}

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

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

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

// pages/_app.js
import '../styles/globals.css';

export default function App({ Component, pageProps }) {
  return ;
}

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

/* styles/globals.css */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

11. 環境変数の使用

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

API_URL=https://example.com/api

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

// Example usage in a component
const apiUrl = process.env.API_URL;

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

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

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

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

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

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

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

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

この投稿は次のサイトでも読むことができます:

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

Next.js は、開発者がサーバーでレンダリングされる高速なアプリケーションを作成できるようにする人気の React フレームワークです。すぐに使える強力な機能を提供します。

salmanyad.hashnode.dev

次の場所で私を見つけてください:

サルマンイヤド · GitHub

コンピュータシステムエンジニア |ウェブ開発者。 SalmanIyad には 31 のリポジトリが利用可能です。 GitHub でコードをフォローしてください。

github.com