Next.jsが開発モードで実行されるポートを変更する方法を学ぶ
Next.jsを使用してビルドされたアプリをローカルで実行しているときに、そのHTTPポートを変更する方法を尋ねられました。デフォルトでは、ポートは3000
、しかしそれは一般的に使用されるポートであり、おそらく別のサービスが実行されています。
どうすれば変更できますか?
答えはにありますpackage.json
Next.jsアプリのメインフォルダーに保存されているファイル。
デフォルトでは、ファイルの内容は次のとおりです。
{
"name": "learn-starter",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "9.3.5",
"react": "16.13.1",
"react-dom": "16.13.1"
}
}
注:正確なパッケージ番号は、更新されるため、ケースによって異なります。
変更する必要があるのはscripts
部。
変化する:
"dev": "next dev",to
"dev": "next dev -p 3001"to start Next.js on port 3001
instead of 3000
.
Now when you run npm run dev
, the command used to start the development server locally, you will see it start on port 3001
:

Download my free Next.js Handbook
More next tutorials:
- Getting started with Next.js
- Next.js vs Gatsby vs create-react-app
- How to install Next.js
- Linking two pages in Next.js using Link
- Dynamic content in Next.js with the router
- Feed data to a Next.js component using getInitialProps
- Styling Next.js components using CSS
- Prefetching content in Next.js
- Using the router to detect the active link in Next.js
- View source to confirm SSR is working in Next.js
- Next.js: populate the head tag with custom tags
- Deploying a Next.js application on Now
- Next.js: run code only on the server side or client side in Next.js
- Deploying a Next.js app in production
- How to analyze the Next.js app bundles
- Lazy loading modules in Next.js
- Adding a wrapper component to your Next.js app
- The icons added by Next.js to your app
- The Next.js App Bundles
- How to use the Next.js Router
- How to use Next.js API Routes
- How to get cookies server-side in a Next.js app
- How to change a Next.js app port