まず、Next.jsアプリケーションのデフォルトのポートは3000ですが、このポートを変更するにはいくつかの方法があります。
- 環境変数を使用する方法: Next.jsでは、環境変数を使用してポートを設定することができます。環境変数を使用する場合、アプリケーションの起動コマンドでポートを指定します。
例えば、ポート番号を5000に変更するには、次のようにします:
PORT=5000 npm run devこのコマンドを実行すると、Next.jsアプリケーションがポート5000で起動します。
- カスタムサーバーを使用する方法:
Next.jsでは、カスタムサーバーを使用してポートを変更することもできます。カスタムサーバーを作成するには、
server.jsという名前のファイルをプロジェクトのルートに作成します。
以下は、カスタムサーバーを使用してポートを変更する例です:
// server.js
const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
const port = 5000; // 変更したいポート番号を指定
app.prepare().then(() => {
createServer((req, res) => {
const parsedUrl = parse(req.url, true);
handle(req, res, parsedUrl);
}).listen(port, (err) => {
if (err) throw err;
console.log(`> Ready on http://localhost:${port}`);
});
});このカスタムサーバーを起動するには、次のコマンドを実行します:
node server.jsこれにより、Next.jsアプリケーションが指定したポートで起動されます。
以上が、Next.jsでポートを変更するためのシンプルで簡単な方法です。必要に応じて、環境変数を使用するかカスタムサーバーを作成するかを選択してください。