Next.jsの起動ポートをnext.config.jsファイルで設定する方法

2024-04-02

Next.jsでポートを設定する方法

ここでは、Next.jsでポートを設定する方法について、以下の3つの方法を紹介します。

環境変数を使う

Next.jsは、PORT環境変数を使用してポート番号を設定することができます。これは、最も簡単で一般的な方法です。

.env.localファイルを作成します。
ファイルに以下の行を追加します。

PORT=3000

アプリケーションを起動します。

npm run dev

上記の設定により、アプリケーションはポート3000で起動します。

next.config.jsファイルを使用して、ポート番号を設定することもできます。

next.config.jsファイルを作成します。

module.exports = {
  port: 3000,
};

npm run dev

const express = require('express');
const next = require('next');

const app = express();
const port = 3000;

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });

app.prepare().then(() => {
  app.use('/', express.static('public'));

  app.get('*', (req, res) => {
    return app.render(req, res, '/');
  });

  app.listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`);
  });
});

node server.js

どの方法を使うかは、開発環境やプロジェクトの要件によって異なります。

補足

Next.jsはデフォルトでポート3000を使用します。
ポート番号は、他のアプリケーションで使用していない番号を選択する必要があります。
ポート番号を設定することで、複数のNext.jsアプリケーションを同時に実行することができます。

環境変数を使う

# .env.localファイル

PORT=3000

next.config.jsファイルを使う

module.exports = {
  port: 3000,
};

server.jsファイルを使う

const express = require('express');
const next = require('next');

const app = express();
const port = 3000;

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });

app.prepare().then(() => {
  app.use('/', express.static('public'));

  app.get('*', (req, res) => {
    return app.render(req, res, '/');
  });

  app.listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`);
  });
});

注意事項

上記のコードはサンプルです。実際のコードは、プロジェクトの要件に合わせて変更する必要があります。

Next.jsでポートを設定する他の方法

startスクリプトを使う

package.jsonファイルのstartスクリプトに--portオプションを追加することで、ポート番号を設定することができます。

{
  "scripts": {
    "start": "next dev --port 3000"
  }
}

Dockerを使用してNext.jsアプリケーションを起動する場合、docker runコマンドに-pオプションを追加することで、ポート番号を設定することができます。

docker run -p 3000:3000 nextjs/hello-world

上記のコマンドは、hello-worldイメージをポート3000で起動します。

Kubernetesを使用してNext.jsアプリケーションをデプロイする場合、DeploymentマニフェストファイルにcontainerPortフィールドを追加することで、ポート番号を設定することができます。

apiVersion: apps/v1
kind: Deployment
metadata:
  name: nextjs-app
spec:
  selector:
    matchLabels:
      app: nextjs-app
  template:
    metadata:
      labels:
        app: nextjs-app
    spec:
      containers:
      - name: nextjs-app
        image: nextjs/hello-world
        ports:
        - containerPort: 3000