Next.js - 概述 - 编程

首页 > 编程 > Next.js - 概述

Next.js - 概述

发布于2024-11-02

本文作为初学者友好的指南和使用 Next.js 的步骤。

Next.js 是一个用于构建 Web 应用程序的灵活框架。相反，它是一个构建在 Node.js 之上的 React 框架。

设置您的 Next.js 项目
要启动新的 Next.js 项目，您需要在计算机上安装 Node.js。

安装
安装时，打开终端并运行以下命令来创建新的 Next.js 项目： npx create-next-app@latest my-nextjs-app
Next.js 提供了一个已经编写的代码，反映了现实世界的开发，以便熟悉现有的代码库。
安装完成后，导航到项目目录并运行开发服务器：
cd my-nextjs-app
npm 运行开发

文件夹结构
典型的 Next.js 项目结构由几个关键文件夹组成：

page/：此文件夹包含定义应用程序路由的文件。该文件夹中的每个文件对应一条路线。
public/：您可以在此处存储图像、字体和图标等静态资源。此处的文件可通过 URL 访问。
styles/：此文件夹保存全局和特定于组件的样式。默认情况下，它包含一个全局 CSS 文件。
components/：可重用的 React 组件。
api/：API路由，用于服务器端功能（可选）。

Nextjs 是首选框架，因为它提供了各种内置功能，例如：

自动代码分割以加快页面加载速度。- Next.js 自动执行代码分割，因此每个页面仅加载该页面所需的内容。这意味着最初不会提供其他页面的代码。
具有优化预取的客户端路由。
- 它将路由创建为页面下的文件，并使用内置的 Link 组件链接到它们。不需要路由库。
- 每当浏览器视口中出现链接组件（标签的 Next.js 版本）时，Next.js 就会自动在后台预取链接页面的代码。因此，当用户单击链接时，目标页面的代码将已在后台加载，并且页面转换将几乎是即时的。
直观的基于页面的路由系统（支持动态路由）
预渲染，每页都支持静态生成（SSG）和服务器端渲染（SSR）。 - 提前为每个页面生成 HTML，而不是由客户端 JavaScript 完成。
如果我们不需要预渲染数据，我们还可以使用一种称为客户端渲染的策略，其中：
1. 静态生成（预渲染）不需要外部数据的页面部分。
2. 页面加载时，使用 JavaScript 从客户端获取外部数据并填充其余部分。
内置 CSS 和 Sass 支持适用于任何 CSS-in-JS 库。
支持快速刷新的开发环境。
使用无服务器函数构建 API 端点的 API 路由
Next.js 支持 API 路由，这让我们可以轻松创建 API 端点作为 Node.js 无服务器函数。我们可以通过在pages/api目录中创建一个函数来做到这一点。
完全可扩展。