如何把 Next.js 项目部署到服务器?
<h1 id="nextjs-是什么">Next.js 是什么?</h1><p>Next.js 是一个用于 生产环境的 React 框架。Next.js 为您提供生产环境所需的所有功能以及最佳的开发体验：包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能 无需任何配置。</p>
<p><img src="https://upload-images.jianshu.io/upload_images/22873039-73682a085d703845.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></p>
<p>21云盒提供了速简单的Next.js部署方法，你可以在21云盒子上通过以<strong>静态网页</strong>或以<strong>Node Server</strong>的方式进行部署。</p>
<p>两者的区别在于, 当以静态网页方式进行部署时，流程是项目会被构建(打包)，然后把最终生成的静态资源(HTML, CSS, JS, 图片等) 部署到全国各地的CDN节点。而当以Node Server的方式进行部署时，流程是先进行项目构建，静态资源部署到全国竹木水口地的CDN节点，然后服务启动进入等待被访问的状态，当有访问到服务请求时，服务器会进行处理。</p>
<p>现在可以进行实际操作:</p>
<ol>
<li>注册成为21云盒子会员</li>
<li>Fork Next.js示例</li>
<li>选以下的方式进行部署</li>
</ol>
<h2 id="以静态网页方式进行部署">以静态网页方式进行部署</h2>
<table>
<thead>
<tr>
<th>环境</th>
<th style="text-align: center"><code>静态网页</code></th>
</tr>
</thead>
<tbody>
<tr>
<td>构建命令</td>
<td style="text-align: center"><strong><code>yarn && yarn build && yarn next export</code></strong></td>
</tr>
<tr>
<td>发布目录</td>
<td style="text-align: center"><strong><code>out</code></strong></td>
</tr>
</tbody>
</table>
<p>如果你不确定怎样操作，可以参考:考: https://www.bilibili.com/video/BV1na4y1W7m3/</p>
<h2 id="以node服务端方式进行部署">以Node服务端方式进行部署</h2>
<table>
<thead>
<tr>
<th>环境</th>
<th style="text-align: center"><code>Node 12.19</code></th>
</tr>
</thead>
<tbody>
<tr>
<td>构建命令</td>
<td style="text-align: center"><strong><code>yarn && yarn build</code></strong></td>
</tr>
<tr>
<td>发布目录</td>
<td style="text-align: center"><strong><code>yarn next start --port 10000</code></strong></td>
</tr>
</tbody>
</table>
<p>如果你不确定怎样操作，可以参考: https://www.bilibili.com/video/BV1na4y1W7m3/</p><br><br>
来源：https://www.cnblogs.com/21yunbox/p/14210052.html
頁:
[1]