应用场景: 考虑到多应用在一个域名下能提高该域名的seo,所以选择通过域名二级目录形式指向 nextjs应用,这里需要修改 nginx 和 nextjs 配置
www.helloworld.com/nextjs 指向 nextjs 目录
nextjs 端口 3000
pm2 管理production 环境
nextjs 路由跳转都在 www.helloworld.com/nextjs 下跳转
image 静态图片资源 src 都为 www.helloworld.com/nextjs 路劲下
node 层 页面指向都能在 www.helloworld.com/nextjs 下跳转
区分开 production 环境和 dev 环境,dev 环境下 不配置nextjs 目录
nginx (映射3000)
pm2 (pm2 管理 next production)
nextjs (next.config.js 配置修改)
www.helloworld.com/nextjs 需要重定向 到 nextjs 3000端口 并且 一系列js css image等资源请求都指向 3000 端口
修改nginx.conf 指向next 应用
server {
listen 80;
server_name www.helloworld.com/nextjs ;
location / {
root html;
index index.html index.htm;
}
location /nextjs/ {
proxy_pass http://127.0.0.1:3000/; #node.js port
proxy_http_version 1.1;
proxy_set_header Host $host;
}
}
配置环境 区分开发环境和生成环境
全局安装 pm2 : npm install pm2 -G
nextjs 目录下创建 ecosyste.config.js并配置
module.exports = {
apps: [
{
name: "nextjs", //pm2 name
script: "./server.js", //node 启动 (node start )
cwd: "./", // 当前工作路径
watch: [
".next", // 监控变化的目录,一旦变化,自动重启
],
ignore_watch: [
// 从监控目录中排除
"node_modules",
"logs",
"static",
],
instances: 1,
node_args: "--harmony",
env: {
NODE_ENV: "development",
PORT: 3006, //端口
},
env_production: {
NODE_ENV: "production",
PORT: 3000, //端口
BASE_PATH: "nextjs",
},
out_file: "./logs/out.log", // 普通日志路径
error_file: "./logs/err.log", // 错误日志路径
merge_logs: true,
log_date_format: "YYYY-MM-DD HH:mm Z", // 设置日志的日期格式
autorestart: true,
watch: false,
max_memory_restart: "1G",
},
],
};
3.添加 npm scripts 生成启动 脚本, 修改package.json
...
"scripts" : {
....
"build": "next build",
'production' : 'pm2 start ecosystem.config.js --env production'
....
}
...
修改next.config.js , next 配置文件
封装 路径,达到不同环境返回不同basePath
const isProd = process.env.NODE_ENV === "production";
function getBasePath() {
var basePath = "";
if (isProd && process.env.BASE_PATH) {
if (process.env.BASE_PATH.startsWith("/")) {
basePath = process.env.BASE_PATH;
} else {
basePath = "/" + process.env.BASE_PATH;
}
}
return basePath;
}
更改next.config.js配置
....
module.exports = {
assetPrefix: getBasePath(), //加前缀
basePath: getBasePath(), //node
webpack(webpackConfig) {
webpackConfig.output.publicPath =
getBasePath() + webpackConfig.output.publicPath; //资源生成前缀
return webpackConfig;
},
}
publicRuntimeConfig: {
basePath: getBasePath(), //写入路径
},
....
3.image 静态 路径
import getConfig from "next/config";
const { publicRuntimeConfig } = getConfig();
// image 标签 url 为image 的路劲
<img src =`${publicRuntimeConfig.basePath + url}` />
4.Link 路劲处理
import getConfig from "next/config";
const { publicRuntimeConfig } = getConfig();
//Link 标签 href 跳转
<Link href=`${publicRuntimeConfig.basePath }index`>
<a className="more">跳转</a>
</Link>
next 打包 : npm run build
production 启动 项目: npm run production
pm2 日志查看 : pm2 logs
pm2 项目监看 : pm2 list
pm2 重启: pm2 reload all
Next.js 有一个提供稳定支持的组织,同时在开源世界也非常的活跃。Next.js 使用简单,代码分离,开箱即用。,初始只加载首页,提升性能,改善 SEO(搜索引擎优化)
umi 就是一套零配置,按最佳实践进行开发的前端框架。支持PWA、按需加载、tree-shake、scope-hoist、智能提取公共文件、Critical CSS、preload、hash build、preact 等等
本文的目的不是要对 React、Vue 和 Angular 三者进行比较,已经有许多人对这个话题进行了比较深入的探讨。每个人都有自己的偏好。与其他库和框架相比,我更喜欢使用 React 构建用户界面。 对我来说,这是构建用户界面唯一正确的方法,它让我爱上了 React。
项目开发中, 大多数团队都会选择使用开源的 UI 库, 那么在 next.js 中要引入第三方库. 我们需要进行相应的配置. 在 css 预处理器上, 目前团队使用 scss . 个人觉得非常好用. 如果要使用 scss 我们必须要做简单配置, 否则是无法使用的
Next.js 提供了 Fast-Refresh 能力,它可以为您对 React 组件所做的编辑提供即时反馈。但是,当你通过 Markdown 文件提供网站内容时,由于 Markdown 不是 React 组件,热更新将失效。
在Next.js应用程序中,可以通过使用Prisma / PostgreSQL数据库来保护应用程序免受SQL注入等安全漏洞的威胁。以下是如何实现此目标的一些技术解决方案和代码示例:
10 月 26 日,Next.js 正式发布。该版本的主要更新如下:Turbopack:App & Pages Router 通过 5000 个测试,服务端操作(稳定):逐步增强的数据变更
近期 Node.js 发布了新网站,带来了全新的外观变化。看其技术选型,也是紧跟潮流,用到了最新的 Next.js App Router 框架,版本 ~14.1.3 这是 Next.js 近期的最新版本了,不过看起来同时也在用 Next.js 的 pages 模式。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!