每日踏踏实实学之 1.Next.js 简介

1. Next.js 简介

学习目标

• 了解 Next.js 的背景和特点

• 掌握 Next.js 的基本概念

• 了解 Next.js 项目的文件结构

内容

• Next.js 的起源和发展

  • Next.js 是由 Vercel（前身为 Zeit）在 2016 年推出的一款开源的 React 框架。

  • 它旨在提供一种简单的方式来构建服务端渲染的 React 应用程序，同时支持静态站点生成和客户端路由等特性。

• Next.js 的优势

  • 自动代码分割：Next.js 允许你将代码分割成小块，按需加载，从而提高页面加载速度。

  • 服务端渲染（SSR）：Next.js 支持在服务器端渲染页面，这有助于提高首屏加载速度和 SEO。

  • 静态站点生成（SSG）：使用 Next.js 可以在构建时预渲染页面，这对于内容不经常变动的网站非常有用。

  • API 路由：Next.js 允许你创建 API 端点，可以直接在 Next.js 应用中处理 API 请求。

  • 内置 CSS 和 Sass 支持：Next.js 支持模块化的 CSS 和 Sass，可以轻松地管理和导入样式文件。

• Next.js 的核心功能

  • 页面路由：Next.js 提供了基于文件系统的路由，使得页面导航变得简单直观。

  • API 路由：可以创建 API 端点，用于处理数据交互。

  • 静态文件服务：Next.js 可以作为静态文件服务器，轻松地托管图片、字体和其他静态资源。

例子

创建项目

# 使用 Create Next App 创建新项目
npx create-next-app@latest
​
# 进入项目目录
cd my-app
​
# 启动开发服务器
npm run dev

项目文件目录

• /app：包含应用程序的所有路由、组件和逻辑，这是您主要工作的地方。

• /app/lib：包含应用程序中使用的函数，例如可重用的实用函数和数据获取函数。

• /app/ui：包含应用程序的所有 UI 组件，例如卡片、表格和表单。为了节省时间，我们为您预先设计了这些组件的样式。

• /public：包含应用程序的所有静态资源，例如图像。

• /scripts：包含一个播种脚本，您将在后面的章节中使用它来填充数据库。

• 配置文件：您还会注意到配置文件，例如next.config.js应用程序根目录中的配置文件。大多数这些文件是在您使用 启动新项目时创建和预配置的create-next-app。在本课程中您不需要修改它们。

课后练习题

• 解释 Next.js 的优势

  • 列举至少三个 Next.js 相对于纯 React 应用的优势，并简要解释每个优势。

• 创建一个 Next.js 项目并运行

  • 使用 Create Next App 创建一个新项目。

  • 在项目中创建一个名为 about 的新页面，并在浏览器中访问它。