一、Introduction

（一）What is Next.js?

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

1.React

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

2.Next

• Next 是一个使用 React 构建用户界面的包
• 加载了更多特性如路由、样式、认证、包优化等，能够构建成熟的可用于生产的应用程序
• 不需要安装额外的包， NextJS 提供了一切
• 实现上述特性需要遵循意见和惯例

（二）Why learn Next.js?

• Next 简化了构建用于生产的 React 应用程序的过程
• File based routing ：基于文件的路由
• Pre-rendering ：预渲染
• API routes ：接口路由
• Support for CSS modules ：支持 CSS 模块
• Authentication ：身份验证
• Dev and Prod build system ：开发和生产环境构建系统

（三）Hello World

npx create-next-app [project-name]

1.styles 目录

• 包含全局样式文件和组件模块文件

2.public 目录

• 包含全局共享的资源文件，如 icons 、 images 、 svgs 等
• 没有 index.html 文件

3.pages 目录

• 包含的页面即系统的路由
• index.js 是入口文件
• _app.js 用于定义组件
• api 目录包含自定义 api 文件