next.js 简单使用
1. 介绍
一个react.js 服务器端渲染开源项目(不只是服务器端渲染,直接也可以生成纯静态站点)
类似的解决方案有好多,比如react.js 自身的服务器渲染方案(但是使用起来就是比较怪异)
gatsbyjs 也是一个不错的解决方案
2. 初始化项目
// 依赖
npm install --save next react react-dom
// package.json 添加启动脚本
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}
3. 进行开发
// 创建目录
mkdir pages
// 简单代码
touch index.js
nano index.js
export default () => <div>Welcome to next.js!</div>
// 启动
npm run dev
ok 就是这么简单
4. 效果

5. 生成的页面

说明:
本身进行了优化,而且和以前的react.js 项目是不一样的,有自己的一套路由,以及错误处理,还有就是styled-jxs 还是比较方便的 , 类似的方式有 styled-components https://www.styled-components.com/
touch next.config.js
module.exports = {
exportPathMap: function() {
return {
'/': { page: '/' },
'/about': { page: '/about' },
'/index': { page: '/index' }
}
}
}
// 修改 package.json
"scripts": {
"dev": "next",
"build": "next build && next export",
"start": "next start"
}
// 启动并生成
npm run build
// 效果 out 目录
.
├── about
│ └── index.html
├── index
│ └── index.html
├── index.html
└── _next
├── 0b64b5d8-c35c-4475-81e3-a13779e823be
│ └── page
│ ├── about
│ │ └── index.js
│ ├── _error
│ │ └── index.js
│ └── index.js
└── fa86b6114a1f9591804ca6129852ceb2
└── app.js
备注:
实际项目需要使用的话,直接放到nginx 后者 varnish traffice server 等类似的静态缓存服务器即可
类似 now 的发布模式就
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· spring官宣接入deepseek,真的太香了~
2016-11-03 spring boot Swagger 集成
2016-11-03 WebJars 进行 css js 资源文件管理