章节9

安装 Next.js

当你在项目中使用 Next.js 时，你不再需要从 unpkg.com 加载 react 和 react-dom 脚本。相反，你可以使用 npm 或你偏好的包管理器在本地安装这些包。

注意：要使用 Next.js，你的机器上需要安装 Node.js 版本 18.17.0 或更高版本（查看最低版本要求），你可以在此处下载。

为此，在与你的 index.html 文件相同的目录中创建一个新文件，名为 package.json，内容为一个空对象 {}。

package.json

{}

在你的终端中，在你的项目根目录运行以下命令

终端

npm install react@latest react-dom@latest next@latest

一旦安装完成，你应该能够在你的 package.json 文件中看到列出的项目依赖项

package.json

{
  "dependencies": {
    "next": "^14.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

如果你使用的版本比上面显示的更高，请不要担心，只要你安装了 next、react 和 react-dom 包，就可以继续。

你还会注意到一个新的名为 package-lock.json 的文件，其中包含有关每个包的确切版本的详细信息。

回到 index.html 文件，你可以删除以下代码

<html> 和 <body> 标签。
<div> 元素，其 id 为 app。
react 和 react-dom 脚本，因为你已经使用 NPM 安装了它们。
Babel 脚本，因为 Next.js 有一个编译器，可以将 JSX 转换为有效的 JavaScript，浏览器可以理解。
<script type="text/jsx"> 标签。
document.getElementById() 和 ReactDom.createRoot() 方法。
React. 部分，即 React.useState(0) 函数中的 React.。

删除上述行后，将以下导入添加到你的文件顶部

index.html

import { useState } from 'react';

你的代码应该看起来像这样

index.html

import { useState } from 'react';
 
function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>;
}
 
function HomePage() {
  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>
  );
}

HTML 文件中只剩下 JSX 代码，因此你可以将文件类型从 .html 更改为 .js 或 .jsx。

创建你的第一个页面

Next.js 使用文件系统路由。这意味着你可以使用文件夹和文件来定义应用程序的路由，而不是使用代码。

以下是如何在 Next.js 中创建你的第一个页面

创建一个名为 app 的新文件夹，并将 index.js 文件移动到其中。
将你的 index.js 文件重命名为 page.js。这将成为你的应用程序的主页。
将 export default 添加到你的 <HomePage> 组件，以帮助 Next.js 区分哪个组件要渲染为页面的主要组件。

app/page.js

import { useState } from 'react';
 
function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>;
}
 
export default function HomePage() {
  // ...
}

运行开发服务器

接下来，让我们运行你的开发服务器，以便你可以在开发时看到新页面中的更改。将 "next dev" 脚本添加到你的 package.json 文件中

package.json

{
  "scripts": {
    "dev": "next dev"
  },
  "dependencies": {
    "next": "^14.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

通过在终端中运行 npm run dev 来检查会发生什么。你会注意到两件事

当你导航到 localhost:3000 时，你应该看到以下错误

Next.js Error Message: You're importing a component that needs useState. It only works in a Client component...

这是因为 Next.js 使用 React Server Components，这是一个允许 React 在服务器上渲染的新功能。服务器组件不支持 useState，因此你需要改用客户端组件。

在下一章中，我们将讨论服务器组件和客户端组件之间的主要区别，并修复此错误。

一个新的名为 layout.js 的文件已自动在 app 文件夹中创建。这是你的应用程序的主要布局。你可以使用它来添加在所有页面之间共享的 UI 元素（例如，导航栏、页脚等）。

/app/layout.js

export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
};
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

总结

看看目前的迁移，你可能已经开始感受到使用 Next.js 的好处

你移除了 React 和 Babel 脚本；这让你初步体验到无需再考虑复杂的工具和配置。
你创建了你的第一个页面。

拓展阅读

Next.js 路由基础知识

定义路由

页面和布局

安装 Next.js

创建你的第一个页面

运行开发服务器

总结

你已完成章节9