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

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 包中引入 useStateimport { 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 时会涉及到的一些概念及对应用法。

关键词:

精心推荐

X 关闭

X 关闭