初心者向けのNext.jsインストール手順とプロジェクト作成のポイント

フロントエンド開発•2025/1/28

はじめに

皆さんはReactを使った開発に興味を持ったことはありませんか。シンプルなアプリを作ろうと思ったときに、React単体でも十分ですが、より効率良く開発したい場面でNext.jsが選択肢に挙がることがあります。

Next.jsはサーバーサイドレンダリング（SSR）や静的サイト生成（SSG）といった機能を簡単に扱えるフレームワークです。一般的なReactアプリよりもSEOに配慮しやすいのが特徴で、ブログや企業サイト、ECサイトなど、多くのユースケースに応用できます。

ただ、初心者の方にとっては「どこから始めたらいいのだろう？」と戸惑うことが多いかもしれません。そこでこの記事では、Next.jsのインストール方法や実務にも通じる利用シーンをわかりやすく解説していきます。

この記事を読むとわかること

Next.jsをインストールする具体的な手順
プロジェクトを作成し、実際に画面を表示する流れ
サーバーサイドレンダリング（SSR）などを活用するメリット
初心者の方がつまずきやすいポイントとトラブルシューティング
実務で考えられるNext.jsの活用シーンの一例

Next.jsとは何か

Next.jsは、Reactをさらに使いやすくするためのフレームワークです。 Reactでは、クライアントサイドでJavaScriptを実行して画面を描画することが多いですが、Next.jsを使うとサーバー側でHTMLを生成できるようになります。

この仕組みによって、検索エンジンに認識されやすいサイトを作りたい場合や、ページの表示を早めたい場合に効果が期待できるでしょう。特に、ユーザーが初めてアクセスするときの読み込み速度を改善したり、SEO対策を強化したい場合に選ばれることが多いです。

また、Next.jsならルーティング設定もシンプルになります。 pagesディレクトリにファイルを置くだけでURLパスが自動生成されるので、初心者の方が扱うときにも分かりやすいでしょう。

実務でもたとえばECサイトや企業ブログなど、多数のページを扱うケースで導入しやすいのが魅力です。静的ファイルの配信とSSRの両方を簡単に切り替えられるため、拡張性にも配慮できるでしょう。

Node.js環境を準備しよう

Next.jsを始めるには、まずNode.jsがインストールされている必要があります。 Node.jsはJavaScriptをサーバーサイドで動かすための環境ですが、ReactやNext.jsの開発には欠かせません。

Windowsであれば公式サイトからインストーラをダウンロードし、画面の指示に従うだけで設定が完了します。 macOSやLinuxの場合は、パッケージマネージャ（Homebrewやaptなど）を使ってインストールすることもできます。

Node.jsが正しくインストールされているかどうかは、ターミナルやコマンドプロンプトで node -v と入力することで確認可能です。また、パッケージ管理に使われるnpmのバージョンも npm -v でチェックできます。

Node.jsは定期的にアップデートされるため、長期間メンテナンスが提供されるLTS（Long Term Support）を選んでおくと安定しやすいです。

Next.jsをインストールする手順

実際の開発を始める際には、パッケージマネージャを使ってNext.jsを導入する方法が大きく分けて2つあります。 1つ目はcreate-next-appコマンドを利用して一気にプロジェクトを作る方法、2つ目はnpmを使って手動で導入する方法です。

シンプルなプロジェクト作成

最も手軽なのは、create-next-appを使うパターンです。ターミナルやコマンドプロンプトで以下のように入力しましょう。


npx create-next-app my-next-project

実行すると、Next.jsの基本的なファイル構成が整ったプロジェクトが自動で生成されます。 my-next-projectというフォルダに、pagesやpublicなどの必要なディレクトリと設定ファイルが作られるので、あとはディレクトリに移動してアプリを立ち上げるだけです。

プロジェクト作成後に


cd my-next-project
npm run dev

と入力すると、サーバーが起動してhttp://localhost:3000へアクセスできるようになります。ブラウザでURLを開くと、Next.jsのデフォルト画面が表示されるでしょう。

npmを使って手動で導入する

必要に応じて、既存のReactプロジェクトにNext.jsの機能を追加することもできます。この場合は、プロジェクトのルートディレクトリで以下のコマンドを実行します。


npm install next react react-dom

インストールが完了したら、package.jsonにスクリプトを追加しておきましょう。例えば以下のように書くと、npm run devでNext.jsを起動できるようになります。


{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

こうすると、もともとReactで作っていたアプリを段階的にNext.jsへ移行することも可能です。

ディレクトリ構成の確認

Next.jsのプロジェクトが生成されると、以下のようなディレクトリ構成ができます。これを理解しておくと、どこにファイルを配置すればいいか迷わなくなります。


my-next-project/
 ┣ pages/
 ┣ public/
 ┣ styles/
 ┣ package.json
 ┣ node_modules/
 ┗ ...

pages：ページに相当するコンポーネントを配置するディレクトリです。

ここに作ったファイル名が自動でURLパスになります。

public：画像やフォントなど、直接配信したい静的ファイルを置くディレクトリです。

たとえばpublicフォルダにfavicon.icoを入れると、ブラウザで/favicon.icoにアクセスできます。

styles：デフォルトではCSSやSassなどのスタイルシートを配置する想定の場所です。

ファイル名の規則などは特に縛りがないため、自由に管理できます。

package.json：インストールされているパッケージやスクリプトコマンドなどが記載されたファイルです。

Next.jsやReact、開発に必要なライブラリのバージョン管理などを行います。

このように初期構成が整っているので、作業を始めやすいのがNext.jsの魅力と言えるでしょう。

サンプルコードを動かしてみよう

次に、簡単なコードを編集してみます。 pages/index.jsにあるコードは、Next.jsを始めた直後の状態だと初期のトップページが表示されるようになっています。

試しに以下のように書き換えてみましょう。


export default function Home() {
  return (
    <div>
      <h1>はじめてのNext.js</h1>
      <p>ここからアプリを作り始めていきましょう。</p>
    </div>
  );
}

保存後にブラウザで再読み込みすると、ページが書き換わった状態が表示されます。このように、Reactでコンポーネントを書く感覚でページの内容を変更できます。

もし自動リロードが有効な環境なら、ファイルを編集して保存するだけでブラウザに即時反映されるでしょう。これを繰り返すことで、フロントエンドの開発を効率良く進められます。

よくあるトラブルシューティング

Next.jsのプロジェクトを起動するときに、いくつかのエラーが出ることがあります。初心者の方が特につまずきやすいポイントを見てみましょう。

ポートがすでに使用されている

すでに他のアプリがポート3000を使っている場合、npm run devでエラーが出ることがあります。そのときはアプリを停止するか、別のポート番号を指定して起動すると解決できるでしょう。

ESLintエラーで警告が出る

Next.jsは標準でESLintが導入されているため、書き方が規約に反していると警告が表示される場合があります。対処としては、Lintのルールを見直したり、コードを規約に合わせて修正すると良いでしょう。

ルーティング設定の混乱

pagesディレクトリの中でファイル名の指定を間違えると、意図しないURLになることがあります。ファイル名とURLの関係がどうなっているかを再度確認するだけで、すんなり理解できるでしょう。

インストール時や起動時に大量のメッセージが出る場合がありますが、エラーとは限らないので慌てずに確認しましょう。

実務での利用シーン

Next.jsは個人ブログから企業規模のサイトまで、実際の現場でさまざまに活用されています。たとえば、ECサイトで商品ページをSSRにすることで、より検索エンジンに見つけてもらいやすくなったり、ユーザーが素早く情報を閲覧できるようになります。

また、社内向けポータルサイトのように、特定の条件でアクセス制限をかけながらSSRを行うケースもあるでしょう。 Next.jsではAPI Routesを使ってバックエンド的な処理も比較的楽に書けるため、フロントとサーバーサイドの垣根を小さくして開発できます。

もしもブログなどを作る場合は、静的サイト生成（SSG）を活用すると、ビルド時にHTMLを生成して高速に配信できるメリットも得られます。コンテンツの量が増えても管理しやすい点が評価されており、初心者の方でも少しずつ機能を学びながら拡張しやすいフレームワークと言えるでしょう。

まとめ

Next.jsはReactに慣れていなくても、create-next-appを使えば簡単にセットアップできるフレームワークです。 SSRや静的サイト生成といった機能をはじめ、実務でも役立つポイントが多く、初心者の方でも理解しやすい構成になっています。

記事の内容を参考に、ぜひ環境構築にチャレンジしてみてください。また、エラーが出ても落ち着いて確認しながら進めれば、徐々に仕組みを身につけていけるでしょう。小さく始めて、少しずつページを拡張しながら、自分なりのWebアプリを育ててみてはいかがでしょうか。