（一）Authentication in Next.js

• 任何项目都会涉及到用户，需要考虑身份和权限
  • Identity 身份：验证用户是谁 —— Authentication 认证
  • Access 权限：验证用户有什么许可 —— Authorization 授权

1.分类

• Client-side authentication
• Server-side authentication
• API routes authentication

（一）API 路由

• NextJS 是一个完整的堆栈框架
• 可以在 React 中编写前端代码，也可以编写被前端代码调用的 API
• API 路由允许创建 RESTful 端点作为 NextJS 项目的文件夹结构的一部分
• 在 pages/api/* 文件夹下，可以为项目定义各种 API
  • 不需要编写任何额外的服务器代码就可以添加业务逻辑，也不需要配置任何 API 路由
• NextJS 提供了编写全栈 React+Node 应用程序所需的一切

（一）Global Styles

1.styles/globals.css

html,
body {
  padding: 0;
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
* {
  box-sizing: border-box;
}
h2 {
  color: orange;
}

（一）App Layout

1.components/Header.js

function Header() {
  return <div className="layout-header">Header</div>;
}
export default Header;

（一）What is Next.js?

• The React Framework for Production， React 生产框架
• https://nextjs.org/

1.React

• 不太可能构建一个完整的功能丰富的应用程序，以便部署到生产环境中
• React 是一个用于构建用户界面的库
• 必须决定应用程序的其他功能，如路由、样式、身份验证等

（一）Routing in a React app

• 安装第三方路由库
• 创建 routes.js 路由配置文件
• 对于每条路由，创建一个组件文件，导出该组件，在 routes.js 中导入它，并使用 path 属性指定路由

（二）Routing in a Next.js app

• 基于文件系统的路由机制
• 当将文件添加到项目中的 pages 文件夹时，它将自动成为可用的路由
• 通过将文件名与嵌套文件夹结构混合和匹配，几乎可以定义最常见的路由模式
  • Route with Pages：页面路由
  • Nested routes：嵌套路由
  • Dynamic routes：动态路由
  • Catch-all routes：全方位路由
  • Navigate from the UI：从 UI 组件中导航
  • Programmatically navigate b/w Pages：编程导航 b/w 页面

（一）Pre-rendering —— 预渲染

1. What?

• 默认情况下， NextJS 预渲染应用程序中的每个页面
• 预渲染指提前为每个页面生成 HTML ，而不是全部由客户端 JavaScript 完成
• NextJS 应用审查时可以看到页面组成的各种元素
• 预渲染指的是在应用程序中生成带有页面所需数据的 HTML 的过程
• NextJS 支持两种形式的预渲染
  • Static Generation ：静态渲染
  • Server-side Rendering ：服务器渲染