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

❝

发布于 2023.05.23。微信公众号不支持外链添加，点击文末“阅读原文”可查看链接内容。

❞

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

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

❝

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

❞

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

npx create-next-app

不过，为了更好的认识 Next.js，我们将从头学习如何将一个 React 项目转换成 Next.js 站点。这里参考了官方 From React to Next.js^[3] 的教程内容。

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      function Header({ title }) {
        return <h1>{ title ? title : 'Default Title' }</h1>
      }

      function HomaPage() {
        const names = ["Ada Lovelace", "Grace Hopper", "Margaret Hamilton"];

        const [likes, setLikes] = React.useState(0);

        function handleClick() {
          setLikes(likes + 1);
        }

        return <div>
          <Header title="Develop. Preview. Ship. 🚀" />
          <ul>
            {
              names.map(name => (
                <li key={name}>{ name }</li>
              ))
            }
          </ul>

          <button onClick={handleClick}>Like ({likes})</button>
        </div>;
      }

      const container = document.getElementById('root');
      const root = ReactDOM.createRoot(container);
      root.render(<HomaPage />);

    </script>
    <!--
    Note: this page is a great way to try React but it's not suitable for production.
    It slowly compiles JSX with Babel in the browser and uses a large development build of React.

    Read this page for starting a new React project with JSX:
    https://react.dev/learn/start-a-new-react-project

    Read this page for adding React with JSX to an existing project:
    https://react.dev/learn/add-react-to-an-existing-project
    -->
  </body>
</html>

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

逐步创建一个 Next.js 站点

添加依赖包

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

pnpm init
pnpm install react react-dom next

❝

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

❞

{
  "name": "next.js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^13.4.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

修改 HTML 文件

只保留 <script type="text/babel"> 里的内容
将 .html 改成 .jsx 后缀，并放入 pages 目录
从 react 包中引入 useState（import { useState } from "react"），将 React.useState 改为 useState
移除 ReactDOM.render() 相关代码，导出<HomePage> 组件（作为默认导出）

import { useState } from 'react';

function Header({ title }) {
  return <h1>{ title ? title : 'Default Title' }</h1>
}

export default function HomaPage() {
  const names = ["Ada Lovelace", "Grace Hopper", "Margaret Hamilton"];

  const [likes, setLikes] = useState(0);

  function handleClick() {
    setLikes(likes + 1);
  }

  return <div>
    <Header title="Develop. Preview. Ship. 🚀" />
    <ul>
      {
        names.map(name => (
          <li key={name}>{ name }</li>
        ))
      }
    </ul>

    <button onClick={handleClick}>Like ({likes})</button>
  </div>;
}

增加启动脚本

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

{
 "scripts": {
        "dev": "next dev"
   },
   // ...
}

启动开发服务器

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

进一步学习

可以从 Next.js 的工作原理^[4] 开始，学习使用 Next.js 时会涉及到的一些概念及对应用法。

参考资料

[1]

React 团队推荐使用: https://react.dev/learn/start-a-new-react-project#production-grade-react-frameworks

[2]

Vercel: https://vercel.com/home

[3]

From React to Next.js: https://nextjs.org/learn/foundations/from-react-to-nextjs

[4]

Next.js 的工作原理: https://nextjs.org/learn/foundations/how-nextjs-works

原文始发于微信公众号（写代码的宝哥）：Next.js：全栈 React 框架，学了 React 不知道它，就像去了淄博没吃烧烤

文章由极客之家整理，本文链接：https://www.bmabk.com/index.php/post/244025.html