javascript - Cum să setezi portul în next.js

O aplicație rulează pe portul 3000 și vreau să rulez o altă aplicație pe un port diferit de portul implicit, care este 3000. Cum pot schimba acest lucru în React Next.js? Fișierul meu package.json conține în prezent:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next",
    "build": "next build",
    "start": "next start"
},

Și comanda CLI pe care o folosesc pentru a porni dev este npm run dev.

Răspuns #1

Acest lucru funcționează pentru mine:

"scripts": { 
    "dev": "next dev -p 8080",
    "start": "next start -p 8080",
},

Răspunsul #2

"scripts": {
    "dev": "next dev -p 8080", // for dev 
    "start": "next start -p 8080" // for prod
},

Răspunsul #3

Cu yarn, pnpm poți transmite cu ușurință orice argumente:
yarn dev -p 8080 sau yarn dev --port=8080

Cu npm folosind -- pentru a transmite argumente:
npm run dev -- -p 8080

Răspunsul #4

Aplicația va porni implicit la http://localhost:3000. Portul implicit poate fi schimbat cu -p, astfel:

 npx next dev -p 4000

Sau folosind variabila de mediu PORT:

PORT=4000 npx next dev

#notă că am folosit npx, nu npm

De asemenea, puteți seta numele gazdei să fie diferit de valoarea implicită 0.0.0.0, ceea ce poate fi util pentru a face aplicația disponibilă pentru alte dispozitive din rețea. Numele gazdei implicit poate fi schimbat cu -H, astfel:

 npx next dev -H 192.168.1.2

Dacă primiți o eroare că portul este deja folosit, ceea ce puteți face pentru a o rezolva în Windows este

Go to the Task Manager.

Scroll and find a task process named. Node.js: Server-side

End this particular task.

Răspunsul #5

trebuie doar să faci:

yarn dev -p PORT_YOU_LIKE

Răspunsul #6

O soluție alternativă folosind variabile de mediu prin fișierul .env

Mulțumită acestui comentariu de pe GitHub

Pentru dezvoltare

1. Creează un script pentru mediul tău de dezvoltare în rădăcina proiectului, de exemplu dev-server.js

// dev-server.js
require('dotenv').config(); // require dotenv
const cli = require('next/dist/cli/next-dev');

cli.nextDev(['-p', process.env.PORT || 3000]);

2. Apoi poți seta un port personalizat în .env astfel: PORT=3002

3. Actualizează comanda dev din package.json pentru a folosi scriptul dev-server.js astfel:

  "scripts": {
    "dev": "node dev-server.js"
  }

4. Rulează npm run dev și aplicația NextJS va porni pe portul 3002.

Pentru producție

1. Creează un script pentru mediul tău de producție în rădăcina proiectului, de exemplu prod-server.js

// prod-server.js
require('dotenv').config(); // require dotenv
const cli = require('next/dist/cli/next-start');

cli.nextStart(['-p', process.env.PORT || 3000]);

2. Apoi poți seta un port personalizat în .env astfel: PORT=3002

3. Actualizează comanda de pornire în package.json pentru a folosi scriptul prod-server.js astfel:

  "scripts": {
    "build": "next build",
    "start": "node prod-server.js"
  }

4. Rulați npm run start și aplicația NextJS va porni pe portul 3002. (Nu uitați să construiți proiectul înainte cu npm run build)

dotenv ar trebui instalat prin npm install dotenv, importat și configurat în scripturi așa cum se vede în fragmentele de cod de mai înainte.

Notă din comentariul de pe GitHub:

Există unii furnizori de găzduire care ne obligă pur și simplu să avem un fișier server.js/index.js. Avantajul soluției de mai sus este că nu necesită nicio dependență suplimentară.

Răspunsul #7

Există două moduri de a face acest lucru:

În fișierul tău package.json, adaugă -p 8080 la scripturile dev/start pentru a porni serverul pe portul 8080:

  "scripts": {
    "dev": "next -p 8080",
    "build": "next build",
    "profile-build": "next build --profile",
    "start": "next start -p 8080"
  }

Alternativ, dacă nu vrei să incluzi acest lucru direct în fișierul package.json, ai putea porni scriptul cu variabila de mediu PORT.

PORT=8080 npm run dev

Vizitați documentația vercel pentru mai multe informații.