web-dev-qa-db-fra.com

Comment construire la production de next.js?

J'essaie d'obtenir une version de production dans next.js pour l'exécuter sur mon serveur, mais je ne peux pas créer de version de production next.js lorsque j'essaie

npm run build

Est-ce que quelqu'un sait comment faire fonctionner correctement une build prod dans next.js? J'ai tout fait dans la documentation next.js mais j'ai toujours cette erreur ci-dessous. Si je fais une compilation de développement, cela fonctionne très bien, mais essayer de générer des prod entraîne des erreurs.

J'ai également build suivant plusieurs fois et réinstallé tous les packages node_modules ayant toujours cette erreur.

il me montre toujours dans le terminal

Error: Could not find a valid build in the '/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/.next' directory! Try building your app with 'next build' before starting the server.
    at Server.readBuildId (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/server/next-server.js:753:15)
    at new Server (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/server/next-server.js:80:25)
    at module.exports (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/server/next.js:6:10)
    at Object.<anonymous> (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/next.config.js:6:13)
    at Module._compile (internal/modules/cjs/loader.js:707:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10)
    at Module.load (internal/modules/cjs/loader.js:605:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:544:12)
    at Function.Module._load (internal/modules/cjs/loader.js:536:3)
    at Module.require (internal/modules/cjs/loader.js:643:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at loadConfig (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/server/config.js:47:28)
    at _callee2$ (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/build/index.js:52:42)
    at tryCatch (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/regenerator-runtime/runtime.js:288:22)
    at Generator.prototype.(anonymous function) [as next] (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/regenerator-runtime/runtime.js:114:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/kk/.npm/_logs/2018-12-10T19_58_00_588Z-debug.log

server.js

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

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV === "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.get("*", (req, res) => {
    return handle(req, res);
  });

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

next.config.js

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

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV === "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.get("/projects/:page", (req, res) => {
    const page = req.params.page;
    let file = "";
    switch (page) {
      case "example1":
        file = "/projects/example1";
        break;
      case "example2":
        file = "/projects/example2";
        break;
    }
    return app.render(req, res, file, { page });
  });

  server.get("*", (req, res) => {
    return handle(req, res);
  });

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

package.json

 {
  "name": "hello-next",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "export": "next export"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@zeit/next-sass": "^1.0.1",
    "express": "^4.16.4",
    "next": "^7.0.2",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "redux": "^4.0.1",
    "video-react": "^0.13.1"
  }
}

Si quelqu'un a une idée, ce serait tellement bien! J'ai l'intention d'exécuter ce site next.js en utilisant le nœud sur mon serveur AWS. Mais pour ce faire, je dois obtenir une version de production de react.js actuellement, je ne peux exécuter qu'une version de développement.

J'espère que quelqu'un a une idée.

Merci d'avance!

node.jsreactjsnext.js
2
Cody

Vous devez lancer next build dans votre dossier racine et non à l'intérieur .next/

0
Fabien Greard

next build suivi par next start devrait être les bonnes commandes pour préparer la génération pour la production et l'exécuter.

Voici un exemple pour package.json. si vous souhaitez exporter une application pour l'exécuter en tant que contenu statique, quelque chose comme l'héberger dans s3 en tant que site Web statique, vous devez exécuter next export

...
"scripts": {
    "build": "next build",
    "start": "next start",
    "export": "next export"
}
...

Assurez-vous que vous disposez des scripts ci-dessus dans votre package.json puis exécutez ce qui suit dans l'ordre

$ npm run build 
$ npm run start

Si vous souhaitez démarrer l'application avec un port spécifique, vous pouvez spécifier -p port comme argument pour npm run commande

npm run start -- -p 3232

Si vous voulez l'incorporer dans un pipeline CI/CD, vous devez avoir Dockerfile, voici un exemple simple

FROM node:Alpine

#copy source 
COPY . /app

# Install deps 
RUN cd /app &&  npm install 

# Build 
RUN npm run build

ENTRYPOINT [ "npm", "run", "start" ]

Besoin de plus d'explications ou d'aide, n'hésitez pas à laisser un commentaire et je serai plus qu'heureux de vous aider.

0
Muhammad Soliman