安装 Next.js
在项目中使用 Next.js 时，你不再需要从 unpkg.com 加载 react 和 react-dom 脚本。相反，你可以使用 npm 或你偏好的包管理器在本地安装这些包。
注意：使用 Next.js 需要你的机器上安装 Node.js 版本 18.17.0 或更高（查看最低版本要求），你可以在此下载。
为此，在与你的 index.html 文件相同的目录中创建一个名为 package.json 的新文件，内容为一个空对象 {}。
{}在你的终端中，运行以下命令于项目根目录：
npm install react@latest react-dom@latest next@latest安装完成后，你应该能在 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.部分。
删除上述代码后，在文件顶部添加以下导入：
import { useState } from 'react';你的代码应如下所示：
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。这将是你的应用程序的主页。 - 为
<HomePage>组件添加export default，以帮助 Next.js 区分哪个组件应作为页面的主组件渲染。
import { useState } from 'react';
function Header({ title }) {
return <h1>{title ? title : 'Default title'}</h1>;
}
export default function HomePage() {
// ...
}运行开发服务器
接下来，让我们运行你的开发服务器，以便在开发过程中查看新页面的更改。向你的 package.json 文件添加一个 "next dev" 脚本：
{
"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 使用了 React 服务端组件 (Server Components)，这是一项允许 React 在服务器上渲染的新功能。服务端组件不支持 useState，因此你需要改用客户端组件 (Client Component)。
在下一章中，我们将讨论服务端组件和客户端组件的主要区别，并修复这个错误。
- 一个名为
layout.js的新文件会自动在app文件夹中创建。这是你的应用程序的主布局。你可以使用它来添加所有页面共享的 UI 元素（例如导航、页脚等）。
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 脚本；这是你不再需要考虑的复杂工具和配置的一部分。
- 你创建了你的第一个页面。
扩展阅读：