学习目标

具备C端Web应用开发的基本能力。

CSR SSR SSG

（1）CSR

客户端渲染(Client-Side Rendering)是B端常见WEB应用开发模式，前后端分离，服务器压力相对更轻，渲染工作在客户端进行，服务器直接返回不加工的 HTML ，用户在后续访问操作。

（2）SSR

服务端渲染(Server-Side Rendering)，这种模式下后端负责渲染的逻辑,而前端只负责UI和交互。

（3）SSG

静态站点生成(Static Site Generation)，在构建的时候直接把结果页面输出html到磁盘，每次访问直接把html返回给客户端，相当于一个静态资源。

项目搭建

系统环境需求

Node.js 12.22.0 或更高版本

创建项目

npx create-next-app@latest --typescript

运行项目

npm run dev 或 yarn dev

项目访问地址为http://localhost:3000

代码可访问GitHub仓库

基本特性

Pages

在Next.js中，一个 page就是一个从 .js、.jsx、.ts 或 .tsx 文件导出的 React 组件，这些文件存放在 pages 目录下。每个 page 都使用其文件名作为路由（route）。

在pages目录下创建about.tsx，访问http://localhost:3000/about即可找到创建的页面。

// about.tsx
function About() {
  return <div>About</div>
}

export default About

CSS支持

Next.js 允许你在 JavaScript 文件中导入（import） CSS 文件。因为 Next.js 扩展了 JavaScript 中的 import 的概念，才能让这一功能成为可能。

新建样式文件styles.css

body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
  background: aqua;
}

创建app.tsx，并引入styles.css文件

import { FC } from 'react'
import './styles.css'

const App: FC = () => (
  <div>Hello World</div>
)

export default App

访问http://localhost:3000/app可看到创建的页面。

Next.js 允许你导入具有 .scss 和 .sass 扩展名的 Sass 文件。你可以通过 CSS 模块以及 .module.scss 或 .module.sass 扩展名来使用组件及的 Sass。

CLI

Next.js CLI 帮你启动、构建和导出（export）应用程序。

要列出所有可用的 CLI 命令，需要在项目目录中运行以下命令：

npx next -h

总结

Next.js 是一个非常全面的现代全栈应用构建方案。它包含了非常优雅的 TypeScript 和 React 支持，同时提供了现代应用常见的需求解决方案，例如：路由，API，PostCSS 工具和代码分割等。

Next.js实战 ｜ 青训营笔记