Next.js是什么
它是Node.js的全栈框架
- CSS要写在JS中；
- 可以页面预渲染 + SSR（Server Side Render服务端渲染）；
- 前后端同构（代码同时运行在两端）；
- 支持React 和 TypeScript;
- 不支持Vue（Vue对应的是Nust.js）；
Next.js的弱项
- 没有提供数据库相关功能，可自行搭配 Sequelize 或 TypeORM；
- 没有提供测试相关功能，可自行搭配 Jest 或 Cypress；
- 有一个 Blitz.js 框架正在完善以上内容；
安装
按照官网命令安装即可；
在.gitignore中添加上/.idea/和/.vscode（它两是编辑器的一些内容）这两个路径；
下面开始一点一点改动代码；
Link 快速导航
加页面
创建pages/posts/my-post.js；
传统导航
- 假如从page1到page2，请求得到page2的html，解析html的时候发现有css和js，就再去请求css文件和js文件；
快速导航
-
快速导航从page1到page2，就只会得到page2的一个js文件，因为所有的HTML、CSS、JS都打包到这个js文件里了，然后再去更换页面里的内容；
image.png
优点
- 页面不会刷新，而是发一个AJAX请求到新页面的内容（返回一个js，js中包含新页面的html、css和js）；
- 不会请求重复的HTML、CSS、JS（因为所有内容都打包成一个js了，就不用再去请求html和css了）；
- 自动在页面插入新页面的内容，删除旧页面的内容；
- 因为省了很多请求和解析过程，所以速度很快；
同构代码
代码会在两端同时运行
- 在组件里写
console.log('winwin')，你会发现Node控制台和浏览器控制台都打印出这句话了；
注意差异
- 不是所有代码都会运行，例如一些需要用户去触发的操作；
- 也不是所有API都能用，例如window在Node里就会报错，因为只有浏览器里才有 window对象啊；
全局配置
创建
- 创建
/pages/_app.js来进行全局配置；
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
- 这个MyApp组件会注入到每个页面，是每个页面的根组件；
- 创建_app.js之后需要重启
yarn dev
自定义Head
- 可以改页面的title和meta；
- 可以在各自组件定义，也可以在_app.js中全局定义；
- 若组件内有定义Head，优先显示组件内的Head；
全局CSS
- 在_app.js里
import '../styles/globals.css'（css要放在styles目录下，styles与pages平级）； - 其他地方不能import globals.css；
- 其他地方只能写局部CSS；
局部CSS
1、官方支持
- 使用
styled-jsx，文档，但它不方便分离CSS和JS； - 使用CSS Modules， 文档，它用起来有点麻烦，
className={styles.error}，每个className都要写个styles；
2、第三方
- 也可以使用styled-components
更改基本路径
- 在文件中你不想写
import '../styles/globals.css'，想写成import 'styles/globals.css' - 新建jsconfig.json文件，代码如下：
{
"compilerOptions": {
"baseUrl": "." //意思是基于我的项目根目录来找
}
}
使用scss
- 安装依赖
yarn add sass； - 直接把后缀
.css改成.scss即可；
静态资源
- next推荐放在public/里，文档
其他类型文件
图片
- 可以自己配置file-loader；
- 当然可以直接用next封装好的next-images插件；
- 也可以用官方的
<Image />组件，next/image；
更多类型
- 自己找loader，然后配置next.config.js；
- 或者看是否有封装成next插件；
扩展知识
- 对于webpack中loader的配置，
outputPath输出路径是硬盘路径，publicPath公共路径是网站路径
{
test: /\.png$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'static',
publicPath: '_next/static'
}
}
]
}
网友评论