要开始使用 Next.js,首先需要在系统上安装 Node.js 和 npm(Node.js 的包管理器)。
下载 Node.js:
验证安装:
安装完成后,可以使用 Create Next App 快速创建一个 Next.js 项目。
在命令行中,运行以下命令:
系统会提示你输入项目名称,假设项目名称为 my-next-app
:
项目创建完成后,进入项目文件夹:
Next.js 项目创建后,默认包含了必要的文件结构和配置。现在你可以启动开发服务器:
在浏览器中访问 http://localhost:3000
,你应该会看到一个默认的 Next.js 欢迎页面,表示项目成功启动。
初始化的 Next.js 项目会包含一些默认文件和文件夹。以下是常见文件结构的解释:
pages/:这是 Next.js 项目中的核心文件夹,Next.js 根据此目录中的文件自动创建路由。
index.js
:默认的首页路由 (/
),你可以在这里定义主页内容。api/
:包含 API 路由的目录。Next.js 允许你在 pages/api/
中创建后端 API 路由。在这里,hello.js
是一个简单的 API 路由示例。public/:
这是项目中存放静态资源的文件夹,如图像、字体、文档等。所有放在 public
文件夹下的文件可以通过 /
路径直接访问。例如,public/logo.png
可以通过 /logo.png
访问。
styles/:用于存放项目的样式文件。
globals.css
:全局样式文件,作用于整个应用程序。Home.module.css
:模块化的 CSS 文件,通常用于组件级别的样式。next.config.js:
Next.js 的配置文件,你可以在这里进行一些自定义配置(可选)。
package.json:
项目中依赖的包和脚本管理文件。这里可以看到 react
、react-dom
和 next
都已经被自动添加为项目依赖项。
完成这些步骤后,你已经安装了 Node.js 和 npm,并成功初始化并运行了一个基本的 Next.js 项目。通过了解项目的文件结构,接下来可以进一步深入学习如何自定义和扩展应用程序。
字数统计 |