我正在尝试部署我的Next.js(React.js(应用程序，并使其可在cloudways服务器上运行：
我在visualstudio代码终端中尝试了以下命令。
npx create-next-app
当执行上述命令时，我创建了以下页面和组件。
_app.js
import "bootstrap/dist/css/bootstrap.min.css";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
index.js
import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.scss";
import Layout from "../components/layout/layout";
export default function Home(initialData) {
return (
<div>
<Head>
<title>Test/title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Layout></Layout>
</div>
);
}
layout.js
import Nvbr from "../navbar";
import React from "react";
export default function Layout(props) {
debugger;
return (
<>
<Nvbr />
<main role="main">
{props.preContainer && props.preContainer}
<div className="album py-5 bg-light">
<div>{props.children}</div>
</div>
</main>
</>
);
}
nvbr.js
import React from "react";
import { Nav, Button, Navbar } from "react-bootstrap";
import Link from "next/link";
import Image from "next/image";
export default function Nvbr() {
return (
<>
<Nav className="py-3 px-4 navbar navbar-expand-lg navbar-light bg-dark">
<div className="container-fluid">
<div className="navbar-toggler">
<button aria-controls="responsive-navbar-nav" type="button" aria-label="Toggle navigation" className="navbar-toggler collapsed">
<span className="navbar-toggler-icon"></span>
</button>
</div>
<div className="navbar-collapse collapse">
<div className="ml-auto">
<div className="ic_top_nav justify-content-end navbar-nav">
<Link href="/">
<a className="nav-link nav-link" data-rb-event-key="2">
Home
</a>
</Link>
<Link href="/about">
<a className="nav-link nav-link" data-rb-event-key="3">
About Us
</a>
</Link>
<Link href="/contact">
<a className="nav-link nav-link" data-rb-event-key="8">
Contact
</a>
</Link>
</div>
</div>
</div>
</div>
</Nav>
</>
);
}
package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"export": "npm run build && next export -o _static"
},
"dependencies": {
"bootstrap": "^5.0.2",
"next": "11.0.1",
"node-sass": "^4.14.1",
"react": "17.0.2",
"react-bootstrap": "^1.6.1",
"react-dom": "17.0.2",
"react-icons": "^4.2.0"
},
"devDependencies": {
"eslint": "7.29.0",
"eslint-config-next": "11.0.1"
}
}
next.config.js
module.exports = {
reactStrictMode: true,
};
const path = require("path");
module.exports = {
distDir: "build",
sassOptions: {
includePaths: [path.join(__dirname, "styles")],
},
};
之后，我执行了以下命令
npm run build -prod
命令执行后，做出了以下回应
test@0.1.0 build E:testGittestnextjsamica
> next build
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info - Checking validity of types
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
info - Generating static pages (5/5)
info - Finalizing page optimization
Page Size First Load JS
┌ ○ / 374 B 89.9 kB
├ /_app 0 B 63.6 kB
├ ○ /404 3.17 kB 66.8 kB
├ ○ /about 3.78 kB 95.9 kB
├ λ /api/data 0 B 63.6 kB
├ λ /api/hello 0 B 63.6 kB
└ ○ /contact 1.28 kB 93.4 kB
+ First Load JS shared by all 63.6 kB
├ chunks/framework.923004.js 42 kB
├ chunks/main.a3a79a.js 20.2 kB
├ chunks/pages/_app.33e666.js 570 B
├ chunks/webpack.61095c.js 810 B
└ css/e9c443dd09903fafb4e8.css 37 kB
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
(ISR) incremental static regeneration (uses revalidate in getStaticProps)
当我创建一个纯React.js应用程序，但Next.js只显示一个空白页面时，这很好。
有没有办法为Next.js设置一个模式，以便在cloudsways或其他一些服务器中部署应用程序？
我尝试了所有已知的方法(通过阅读https://nextjs.org/docs/deployment和谷歌(，但无法在浏览器中使用。
Nextjs有两个步骤。构建并启动。
npm run build
将为您提供生成文件夹。但是，要运行应用程序，您需要运行
npm run start
但是，它将在端口3000启动应用程序。要测试应用程序是否正在运行，请在具有另一个终端的机器中运行curl localhost:3000，您应该会看到返回。
然后，您需要按照本文的要求在cloudway服务器中安装pm2，并使用pm2启动服务。
如果您仍然有错误，本指南也应该给出一些提示。