Next.js 是一个知名的 React 框架,帮助您创建快速且现代的网站,易于使用,并具有强大的功能,如服务器端渲染、创建静态页面和构建 API。
如果您想在 Next.js 项目上开始工作,并且使用的是 基于 Ubuntu 的系统,本指南将逐步引导您完成整个过程。
前提条件
在您开始设置 Next.js 项目之前,您需要在 Linux 系统上安装一些软件,包括:
Node.js
:Next.js 是建立在Node.js
之上的,因此您需要安装 Node.js。npm
:npm(Node 包管理器)用于管理项目的包和依赖项。
让我们来看看 Node.js
和 npm
的安装过程。
步骤 1:在 Linux 中安装 Node.js 和 NPM
在安装任何新软件之前,更新您的软件包列表是个好主意,以确保您安装的是最新版本的可用软件。
sudo apt update
接下来,您可以安装 Node.js
(同时安装 npm
),最好安装标记为 LTS(长期支持)的 Node.js
版本,因为这是最稳定和最广泛使用的版本。
sudo apt install nodejs
安装完成后,通过检查其版本来验证 Node.js
是否正确安装:
node -v npm -v
现在您系统上已经安装了 Node.js
和 npm
。
步骤 2:安装和设置 Next.js 项目
现在您已经安装了 Node.js
和 npm
,是时候创建一个新的 Next.js 项目了。安装 Next.js 的最简单方法是使用 create-next-app
,这是 Next.js 团队提供的官方包。
sudo npm install -g create-next-app
现在 create-next-app
已经安装,您可以创建一个新的 Next.js 项目。
npx create-next-app@latest my-next-app
在这里,my-next-app
是您的项目文件夹名称。您可以将其替换为任何您喜欢的名称。npx 命令将下载并运行 create-next-app
包,并为您设置一个新的 Next.js 项目。

一旦命令完成运行,您将拥有一个名为 my-next-app
的新文件夹,里面包含一个 Next.js 应用程序的基本结构。
步骤 3:运行您的 Next.js 项目
项目创建后,进入您的项目文件夹并启动开发服务器:
cd my-next-app npm run dev
此命令将启动 Next.js 开发服务器。默认情况下,服务器将在 http://localhost:3000
上运行。

打开您的浏览器并访问该网址,您应该会看到默认的 Next.js 欢迎页面。

您可以开始在 app
文件夹中创建新页面。例如,在 app
目录中创建一个新文件 about.js
来创建一个关于页面。
结论
您已经在您的 Next.js 项目 成功设置了新的 Ubuntu 机器!现在,您可以通过添加新页面、组件和功能来开始构建您的 web 应用程序。
Next.js 使构建现代 web 应用程序变得简单,在本指南的帮助下,您已经学习了如何安装和设置 Next.js 项目。