章节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> 标签。
id 为 app 的 <div> 元素。
react 和 react-dom 脚本，因为您已使用 NPM 安装了它们。
Babel 脚本，因为 Next.js 有一个编译器可以将 JSX 转换为浏览器可以理解的有效 JavaScript。
<script type="text/jsx"> 标签。
document.getElementById() 和 ReactDom.createRoot() 方法。
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 服务器组件，这是一项允许 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