文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在cloudways或debian上部署和配置nextjs (使用reactjs)应用程序？

问如何在cloudways或debian上部署和配置nextjs (使用reactjs)应用程序？
EN

Stack Overflow用户

提问于 2021-07-06 11:08:13

回答 1查看 770关注 0票数 0

我正在尝试部署我的Next.js (React.js)应用程序，并使它能够在cloudways服务器上运行：

我尝试在visual studio代码终端中执行命令。

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:\test\Git\test\nextjs\amica
> 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和谷歌的文章)，但它不能在浏览器中使用。

reactjs

next.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-03-01 07:50:21

Nextjs有两个步骤。建立并开始。

npm run build

将给您生成文件夹。但是，要运行应用程序，您需要运行

npm run start

但是，它将在3000端口启动应用程序。若要测试应用程序是否正在运行，请在带有另一个终端的机器上运行curl localhost:3000，您将看到返回。

然后，您需要遵循文章在cloudway服务器中安装pm2并使用pm2启动服务。

如果仍然有错误，这个指南也应该给出一些提示。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68269468

复制

相似问题

问如何在cloudways或debian上部署和配置nextjs (使用reactjs)应用程序？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在cloudways或debian上部署和配置nextjs (使用reactjs)应用程序？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在cloudways或debian上部署和配置nextjs (使用reactjs)应用程序？
EN