这是我参与「第五届青训营 」笔记创作活动的第10天

nextjs入门

创建项目

使用create-react-app

npm i -g create-next-app

create-next-app nextapp

或npx create-next-app

目录结构

• components文件夹 组件
• node_modules文件夹 项目依赖
• pages文件夹：页面组件
• static(public)文件夹：静态文件夹

页面

在nextjs中，页面是一个react组件，存放于pages文件夹下。

在构建时，nextjs会自动根据文件夹路径生成路由

预渲染

默认情况下，nextjs会预渲染每个页面，这意味着nextjs会预先生成html文件，而不是交由客户端通过JavaScript渲染。预渲染可以带来更好的性能和SEO。

服务端渲染

nextjs具有两种形式的渲染：静态生成和服务端渲染。这两种方式的不同之处在于为page页面生成html页面的时机。

• 静态生成：HTML在构建时生成，并在每次页面请求时重用
• 服务器端渲染：在每次页面请求时重新生成HTML

nextjs允许为每个页面选择渲染方式。

路由

nextjs路由有两种形式，声明式和命令式。分别是<link>标签和router组件。

动态路由

例如pages/post/[id].js会接受key为id的params

const router=useRouter()
const {id}=router.query

/[a]/[b].js会依次接受多个params

获取数据

getStaticProps

构建时请求数据

在构建阶段返回页面所需要的数据

如果是动态路由的页面，使用getStaticPaths方法来返回所有路由参数

getServerSideProps

每次访问时请求数据

只会在服务端运行，每次请求都运行一遍getServerSideProps

如果页面通过客户端Link组件导航而来，Next会向服务端发一个请求，然后再服务端运行getServerSideProps方法，然后返回JSON到客户端

CSS支持

在pages/_app.jsx中引入全局CSS

在组建中引入[name].module.css

通过classname=[name].xxx来确保样式不冲突