当前位置：首页 > 资讯 > > 正文

Next.js：全栈 React 框架，学了 React 不知道它，就像去了淄博没吃烧烤

来源：哔哩哔哩    时间：2023-06-06 03:31:58

Next.js 是一个全栈 React 框架，专门用于开发 Web 站点，可简可繁。下到纯静态博客，上到复杂的动态站点，都能驾驭。也是 React 团队推荐使用 的，由 Vercel* 公司创建并维护。

官网地址：https://nextjs.org/

* Vercel 是一家云计算公司，提供基于云的前端开发和部署工具。他们的使命是使 Web 开发更快、更简单，同时提供高效的性能和安全性。


(资料图片)

创建起来也特简单，装好 Node 环境，执行下面语句就行：

不过，为了更好的认识 Next.js，我们将从头学习如何将一个 React 项目转换成 Next.js 站点。

一个包含简单 React 项目的 HTML 网页

接下来，我们将学习如何将这个 HTML 网页转化成一个 Next.js 站点。

逐步创建一个 Next.js 站点

添加依赖包一个 Next.js 至少包含 3 个依赖：react、react-dom及next。

注意：为了节省硬盘空间，我这里使用 pnpm 这个包管理器，没安装的可以通过 npm install -g pnpm指令安装。

修改 HTML 文件

只保留 <script type="text/babel">里的内容

将 .html改成 .jsx后缀，并放入 pages目录

从 react 包中引入 useState（import { useState } from "react"），将 React.useState改为 useState

移除 ReactDOM.render()相关代码，导出<HomePage>组件（作为默认导出）

pages/index.jsx

增加启动脚本

修改 package.json，增加启动脚本。

启动开发服务器

运行命令 pnpm run dev，浏览器访问 localhost:3000，现在就能享受到热更新特性了（英文“Fast Refresh”，即修改组件代码后，无需刷新，也不会丢失组件状态，就能享受更新）。

进一步学习

可以从 Next.js 的工作原理（地址：https://nextjs.org/learn/foundations/how-nextjs-works） 开始，学习使用 Next.js 时会涉及到的一些概念及对应用法。

关键词：

上一篇：《死亡细胞》销量破千万 更新计划已规划至2025年 世界独家

下一篇：最后一页

精心推荐

X 关闭

资讯

Next.js：全栈 React 框架，学了 React 不知道它，就像去了淄博没吃烧烤

行业排行

X 关闭

产业