Learning Path
浏览 Nextjs 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
12
Next.js 教程 Next.js 是一个基于 React 的开源框架，用于构建快速、现代化的 Web 应用程序。 Next.js 用于构建高性能的服务器端渲染（SSR）和静态生成（Static Generation）的现代 Web 应用。 Next.js 由 Vercel 公司开发和维护，旨在简化 React 应用的开发流程，同时提供强大的性能优化和开发体验。。 与 React 的关系 React 是一个用于构建用户..
Next.js 组件与布局 Next.js 的组件与布局功能为开发者提供了强大的工具，帮助构建模块化、可维护的 Web 应用。 功能说明组件页面组件、UI 组件、功能组件，用于构建应用的各个部分。布局全局布局、嵌套布局、动态布局，用于定义页面结构和公共元素。特殊文件(旧版本)_app.js、_document.js、_error.js，用于定义全局布局和文档结构。 在 Next.js 13 中，app 目录替代了传统的 pages 目..
Next.js CSS 样式 在 Next.js 中，样式的使用非常灵活，我们可以选择多种方式来为你的应用添加样式。 全局样式 全局样式是影响整个应用的 CSS 样式，它通常用于设置页面的基础样式，如字体、颜色、布局等。 Next.js 通过 app/layout.tsx 中引入全局 CSS 文件。 默认情况下 app 目录已经有了全局样式 globals.css 文件，如果不存在，你也可以创建一个新的 CSS 文件。 在 st..
Next.js 数据获取 Next.js 提供了多种数据获取方式，允许你在不同的渲染阶段（例如，服务器端渲染、静态生成和客户端渲染）获取和展示数据。 客户端数据获取 有时你希望在页面加载后从客户端获取数据，而不是在构建时或服务器端获取，你可以使用 React 的 useEffect 钩子来处理客户端数据获取。 使用 useEffect 和 fetch 在 React 组件中使用 useEffect 钩子和 fetch API 获..
Next.js 图片和字体 Next.js 提供了内置的图片和字体优化功能，旨在提升应用性能和用户体验。 Next.js 的图片和字体优化功能为开发者提供了强大的工具，帮助构建高性能、用户体验优秀的 Web 应用。 功能说明图片优化使用 <Image> 组件，支持本地和远程图片，自动优化尺寸和加载性能。字体优化使用 next/font 模块，支持 Google 字体和本地字体，自动托管和优化加载。静态资源管理..
Next.js 安装 在开始之前，确保你已经安装了 Node.js 和 npm，你可以通过以下命令检查它们是否已经安装： node -v npm -v 如果你的系统还不支持 Node.js 及 NPM 可以参考我们的 Node.js 教程。 国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm: $ npm install -g cnpm --registry=htt..
Next.js 简介 Next.js 是一个功能强大、易于使用的 React 框架，可以帮助开发者快速构建高性能、可扩展的 Web 应用程序。 Next.js 提供了丰富的功能和特性，简化了 React 应用的开发流程，并提升了应用的性能和用户体验。 核心优势开箱即用的功能: Next.js 内置了路由、数据获取、API 路由、样式解决方案、国际化等常用功能，无需额外配置即可使用。灵活的渲染方式: Next.js 支持 静态..
Next.js 目录结构在 Next.js 中，目录结构是基于文件系统的路由机制来组织的，这意味着你的文件和文件夹结构直接决定了你应用的路由和页面布局。 app/ 目录用于存放页面和布局文件，是 Next.js 中的核心目录。public/ 用于存放公开的静态资源文件。styles/ 用于存放样式文件。node_modules/ 存放项目的所有依赖包。package.json 是项目的配置文件，包含项目依赖和脚本命令。next.con..
Next.js 页面和路由 Next.js 使用文件系统路由，意味着你应用中的页面是由文件系统的结构来自动决定的，每个文件和文件夹都与一个路由相对应，而不需要像传统的 React 路由那样显式地配置每个路径，这使得开发过程更加直观和简便。 页面与路由的关系：在 Next.js 中，每个页面都是由 app/ 或 pages/ 目录中的文件自动映射到一个路由，每个文件的路径和文件名决定了该页面的 URL。 基本页面结构：在 Ne..
Next.js 项目说明 Next.js 项目由多个文件和文件夹组成，每个部分都有其特定的作用。以下是对 Next.js 项目代码的基本解析，帮助你理解项目的结构和各个部分的功能。 从 Next.js 13 开始，Next.js 引入了基于文件系统的 App Router（app 目录），取代了传统的 pages 目录。新的 app 目录提供了更强大的功能，如嵌套路由、布局、服务器组件等。 项目结构 一个使用 app 目录的 Nex..
Next.js Tailwind CSS 在 Next.js 项目中使用 Tailwind CSS 是一个很流行的选择，因为它提供了一种实用工具优先的方法来编写 CSS，使得你可以直接在类名中应用样式，这种方法使得样式编写更加简洁和直观。 Tailwind CSS 教程：https://www.runoob.com/tailwindcss/tailwindcss-tutorial.html Tailwind CSS 官网：https:..