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

学习笔记

Next.js的入门学习

对Next.js，理解成服务端用来渲染react应用的。 脚手架的下载:

npx create-next-app@latest

yarn create next-app

pnpm create next-app

按照控制台的提示信息依次输入项目名称 / 是否使用TypeScript / eslint代码检查。

启动：

npm run/pnpm/yarn dev

目录结构：

.next 启动或者构建生成的文件。
components 公共组件库。
pages 默认的路由页面，index.js为该目录的默认文件，[id]带路由参数的路由文件，新建的文件夹为新的路由。pages里有_app.js文件，相当于所有路由视图公共的layouts，包裹了所有的路由视图文件，可以放一些公共样式/script脚本等。
public 公共文件夹。相当于express/koa等配置的静态文件夹，里面的文件可以用相对路径/找到（/assets/logo.png）
styles 样式文件夹 需要注意的是next似乎只支持.module.css模块化的样式写法。

模块化的样式写法：
xxxx.module.css
import styles from xxxx.module.css (import进来的样式是一个扁平化的对象)
使用 styles.

路由跳转

通过Next内置的一些组件来自动跳转或者react-router来跳转。
点击链接跳转和通过JS跳转。

import Link from 'next/link'

<Link href="/blog/hello-world">Blog Post</Link>
//携带参数
<Link
   href={{
     pathname: '/blog/[slug]',
     query: { slug: post.slug },
  }}
>
 xxx
</Link>



import { useRouter } from 'next/router'

// 组件内部 用它的push或者replace方法来路由跳转
const router = useRouter()

数据请求

不需要服务端渲染的请求（也就是说客户端的请求）可以用任意的xmlhttprequest/fetch请求。

服务端请求

暴露一个getServerSideProps方法来告诉next需要服务端来请求数据。getServerSideProps内部进行请求并最终return给组件。

在getServerSideProps内部同步请求并return给组件的props，组件则可以通过props拿到其数据。
在服务端请求并渲染的好处是隐藏服务器的真实api接口，且用了该数据服务端会渲染好页面，利好seo。

需要注意的是getServerSideProps不可随意更改。如果是动态路由页面需要取参数，getServerSideProps函数有形参，输出形参或者直接输出arguments即可拿到那些动态数据。
(getServerSideProps是运行在服务器端的，输出不会显示在浏览器F12的Console面板，会打印在启动服务的控制台里)需要的路由参数就在query对象里。