# BasicTo Next.js

Next.js 是什么？
Next.js 解决了什么问题？
Next.js 特点
如何使用 Next.js(React)

# 是什么

The React Framework for the

the Desktop
the Mobile Apps
Lightweight Apps
SEO-Friendly Sites
PWAs
Electron
Production
Pre-Rendered Apps
Static Websites
the Jamstack
the Enterprise

# 特点

文件系统的路由
自动的代码分割
数据获取
动态路由
TypeScript 的支持
CSS
SASS
API Routes
Using next/head
Pre-Render
静态导出
CSS-in-JS
零配置
完全可扩展

# Pre-rendering

默认情况下，Next.js 预渲染每个页面。这意味着 Next.js 会为每个页面预先生成 HTML，而不是由客户端 JavaScript 来完成。预渲染可以带来更好的性能和 SEO。每个生成的 HTML 都与该页面所需的最少 JavaScript 代码相关联。当浏览器加载页面时，其 JavaScript 代码将运行并使页面完全具有交互性。（此过程称为同构）

具体来说：在没有使用 Next.js 的 react 项目中通常是 SPA 的项目，需要先加载 js 然后渲染出页面，如图所示

next/next-02

在等待并加载 js 的过程中，因为 React 的组件还没有渲染出来，所以页面还是白屏，直到 js 加载并执行完毕才可以交互。这种体验并不友好，一旦 js 加载过慢，就会带来首次加载白屏时间过长的问题，如图所示

next/next-01

Next.js pre rendering 使用 Next.js 可以为每个页面预先生成 HTML，这样子即使 js 并没有加载完毕，页面上也是有可视内容的(只是暂时无法交互)。Next.js 存在两种预渲染的方式：

静态文件生成 Static Generation
服务器端渲染 Server-side Rendering

两者的主要区别是在什么时间生成 HTML，Static Generation是在构建的时候，Server-side Rendering 是在每次请求的时候生成 HTML。

next/next-03

next/next-04

Next.js 可以通过设置来决定哪些页面是Static Generation或者是Server-side Rendering的

# Static Generation

Static Generation 支持先获取外部的依赖数据来渲染页面，通过一个异步的getStaticProps方法

getStaticProps 在产品模式是在build时运行的，在开发模式下每次都会运行

export default function Home(props) { ... }

export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = ...

  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: ...
  }
}

getStaticProps

export const getStaticProps = async () => {
  const res = await fetch('https://.../posts')
  const posts: Post[] = await res.json()

  return {
    props: {
      posts,
    },
     revalidate: 1, // In seconds  每秒计算几次
  }
}

仅在服务器端运行，不会构建到前端代码中
因为在构建时运行，可能会影响构建的速度

什么时候该用？

渲染页面所需的数据在构建时(用户请求之前)获得
数据来自于 CMS
数据可以被公开缓存
该页面必须预渲染（对于 SEO）并且必须非常快 - getStaticProps 会生成 HTML 和 JSON 文件，CDN 可以将它们都缓存以提高性能

getStaticPaths

← Egg.js 日志配置 HowTo Next.js →