本地基于
next.js前端博客项目、express、cherry-markdown,做一个next.js blog的isr测试。Next.js 允许您在构建网站后创建或更新静态页面。增量静态重新生成 (ISR) 使您能够在每个页面上使用静态生成,而无需重建整个站点。借助 ISR,您可以在扩展到数百万页的同时保留静态的优势。这种情况,在本地测试需要同时启动两个服务,如果单独一个一个启动是一件很麻烦的事。本文就介绍一种方式,可以快速在同一个命令行内同时启动两个项目开发。
1、concurrently
提供一种简单而灵活的方式来管理和控制同时运行的多个指令,适合同时启动多个项目
2、使用方式
执行command1,command2的指令的方式
- 命令方式启动
concurrently "command1 arg" "command2 arg"
注意:指令都需要单独需要引号包起来,否则会被认为是多个单独的命令
- package.json执行
"start": "concurrently \"command1 arg\" \"command2 arg\""
注意:需要转义,否则会报错
- 代码执行
const concurrently = require('concurrently');
const { result } = concurrently(
[
"yarn:command1",
"yarn:command2"
],
);
result.then(success, failure);
3、本地测试
# 1、创建项目根目录,同时安装concurrently
mkdir demo && cd demo && yarn init && yarn add concurrently
# 2、创建express管理文件项目
mkdir file && cd file && npx express-generator --hbs && yarn
# 3、创建next.js简易博客项目
cd .. && npx create-next-app --example blog-starter blog-starter-app
# 4、在根目中的package.json 添加对应脚本
"scripts": {
"dev":"concurrently \"cd file && yarn start\" \" cd blog-starter-app && yarn dev\" "
}
# 5、执行命令,最终控制台会出现两个地址,一个3000端口,一个3001端口
yarn dev
# 也可以以代码方式执行,使用cmd方式创建index.js,然后使用cmd命令运行 node index.js
echo const concurrently = require("concurrently"); ^
const success = function () { console.log("success") }; ^
const failure = function () { console.log("failure") }; ^
const { result } = concurrently( ^
[ ^
"cd file && yarn start", ^
"cd blog-starter-app && yarn dev" ^
] ^
); ^
result.then(success, failure);> index.js
4、基于上述工具、测试项目:next.js+express+markdown
yarn i
yarn start
基于next.js前端博客内容展示+express文件管理+markdown编辑及可预览,其中markdown可自定义处理对应规则和方法。
next.js需要在正式环境才可以测试isr功能。是否缓存自己的页面,在网络状态里可以看响应头X-Nextjs-Cache:HIT。如果需要重新生成该页面,需要手动触发,下次访问就会重新展示新的内容。
- 对应代码地址: github.com/YexWz/test-…