如何在Ubuntu上安装和设置新的Next.js项目

Next.js 是一个知名的 React 框架,帮助您创建快速且现代的网站,易于使用,并具有强大的功能,如服务器端渲染、创建静态页面和构建 API。

如果您想在 Next.js 项目上开始工作,并且使用的是 基于 Ubuntu 的系统,本指南将逐步引导您完成整个过程。

前提条件

在您开始设置 Next.js 项目之前,您需要在 Linux 系统上安装一些软件,包括:

  • Node.jsNext.js 是建立在 Node.js 之上的,因此您需要安装 Node.js
  • npmnpmNode 包管理器)用于管理项目的包和依赖项。

让我们来看看 Node.jsnpm 的安装过程。

步骤 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.jsnpm

步骤 2:安装和设置 Next.js 项目

现在您已经安装了 Node.jsnpm,是时候创建一个新的 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 项目。

Create a New Next.js Project

一旦命令完成运行,您将拥有一个名为 my-next-app 的新文件夹,里面包含一个 Next.js 应用程序的基本结构。

步骤 3:运行您的 Next.js 项目

项目创建后,进入您的项目文件夹并启动开发服务器:

cd my-next-app
npm run dev

此命令将启动 Next.js 开发服务器。默认情况下,服务器将在 http://localhost:3000 上运行。

Run Next.js Project

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

Default Next.js Page

您可以开始在 app 文件夹中创建新页面。例如,在 app 目录中创建一个新文件 about.js 来创建一个关于页面。

结论

您已经在您的 Next.js 项目 成功设置了新的 Ubuntu 机器!现在,您可以通过添加新页面、组件和功能来开始构建您的 web 应用程序。

Next.js 使构建现代 web 应用程序变得简单,在本指南的帮助下,您已经学习了如何安装和设置 Next.js 项目。

Source:
https://www.tecmint.com/install-next-js-ubuntu/