Next.jsインストール

Next.jsはReactベースのフレームワークであり、特にサーバーサイドレンダリング（SSR）と静的サイト生成（SSG）を強力にサポートしています。

SSRにより、ページをサーバー側で動的に生成することで、初回読み込み時のパフォーマンスを向上させ、SEOにも有利です。また、SSGはビルド時にページを静的に生成し、CDNにキャッシュすることで、表示速度を高め、コストを削減します。

さらに、Next.jsはファイルベースのルーティング、TypeScriptのネイティブサポート、簡単なAPIルートの作成、そして開発中のホットリローディングなどの機能も備えており、開発者にとって柔軟性と効率性を提供します。そのため、多くの企業や開発者によって広く採用されています。

インストールする
構成
1. エラー
  1. punycode モジュールの非推奨
  2. リクエストが失敗して再試行

インストールする

インストールするためにこちらのコマンドを打ちます。npx create-next-app@latest。

最新バージョンの create-nuxt-app パッケージがインストールされます。問題なければ「y」を入力してください。

D:\mynode>npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.4
Ok to proceed? (y)

Bash

Next.js プロジェクトの作成時にいくつかのオプションを尋ねられます。最初に試す程度でしたら下記の内容で良いと思います。

√ What is your project named? ... my-app（新しいプロジェクトに与える名前を入力します。）
√ Would you like to use TypeScript? ... No（TypeScriptを使用しないで、JavaScriptでプロジェクトを作成します。）
√ Would you like to use ESLint? ... Yes（コードの品質チェックやスタイルガイドに基づいた静的解析を行います。）
√ Would you like to use Tailwind CSS? ... No（初心者向けにはTailwind CSSの代わりに独自のCSSや他のスタイリング方法を使用します。）
√ Would you like to use `src/` directory? ... No（プロジェクトのルートにコードを配置します。）
√ Would you like to use App Router? (recommended) ... No（初めてのプロジェクトでは推奨されるApp Routerを使わず、基本的なルーティングを学ぶことをお勧めします。）
√ Would you like to customize the default import alias (@/*)? ... No（デフォルトの設定を使用して、インポートエイリアスをカスタマイズしません。）

Bash

次に、プロジェクトのディレクトリに移動します。

cd my-app

Bash

その後、開発サーバーを起動します。

npm run dev

Bash

すると、以下のようにサーバーが起動します。

D:\mynode>cd my-app

D:\mynode\my-app>npm run dev 

> my-app@0.1.0 dev
> next dev

  ▲ Next.js 14.2.4
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 2.6s

Bash

http://localhost:3000/←のURLにアクセスするとサーバーが起動しているのが分かります。

構成

オプションによって異なりますが、このような構成です

my-app/  
├── .next/                # ビルドキャッシュ・コンパイル済みファイル
├── app/                  # ルートディレクトリ（新しい App Router のエントリーポイント）
├── node_modules/         # プロジェクト依存パッケージが格納される
├── public/               # 静的ファイル（画像、フォントなど）
│   └── (例: favicon.ico) # 静的リソース
├── .gitignore            # Git で無視するファイルを指定
├── jsconfig.json         # JavaScript 設定（モジュールエイリアスや型情報）
├── next.config.mjs       # Next.js の設定ファイル
├── package-lock.json     # 依存関係のバージョン固定情報
├── package.json          # プロジェクトの設定・スクリプト・依存パッケージ
├── README.md             # プロジェクト概要や説明
└── その他のファイル      # 任意に追加するファイル

Bash

.next/
開発サーバーやビルドで生成されるキャッシュとコンパイル済みファイルが格納されます。
app/
新しいルーティングシステムのコンポーネントを配置するフォルダ。ページ構成の中心です。
node_modules/
プロジェクトで使用する依存パッケージがここに保存されます。
public/
静的リソースを配置するフォルダ。例えば、画像やフォントなどを /images/ や /favicon.ico として利用できます。
.gitignore
Git で追跡しないファイルやフォルダを指定する設定ファイル。
jsconfig.json
JavaScript プロジェクトの設定ファイル。エイリアスの設定や型サポートに使います。
next.config.mjs
Next.js の動作をカスタマイズする設定ファイル。
package-lock.json
依存パッケージの正確なバージョン情報を記録するファイル。開発環境の再現性を確保します。
package.json
プロジェクト名、バージョン、スクリプト、依存関係などを管理するファイル。
README.md
プロジェクト概要や使い方などを説明する Markdown ファイル。

主に触るのは、app/ → ページやコンポーネントの作成・編集。public/ → 静的リソースの管理。

変更があれば、next.config.mjs → プロジェクトの設定変更。package.json → 依存関係の管理やスクリプト設定。

これらのファイルを中心に開発を進めます。

エラー

punycode モジュールの非推奨

punycode は、古いバージョンの Node.js では内部モジュールとして提供されていましたが、新しいバージョンでは非推奨になっています。
Next.js の内部依存関係（例えば url モジュールや dns モジュール）が punycode を呼び出している可能性があります。

(node:1172) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.

(node:26540) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.

(node:32060) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.