快速开始

欢迎阅读 Next.js 文档！

如果你对 Next.js 还不熟悉，我们建议你从互动课程开始。

通过这些带小测验的互动课程你将学到使用 Next.js 所需的全部知识。

如果你有任何与 Next.js 相关的问题，欢迎随时在 GitHub Discussions 上向我们的社区寻求帮助。

安装设置

我们建议使用 create-next-app创建新的 Next.js 应用程序，它会自动为你设置所有内容。创建项目，请运行：

npx create-next-app
# or
yarn create next-app

安装完成后，按照指示启动开发服务器。试着编辑 pages/index.js 文件并在浏览器上查看结果。

为你的项目安装 next、react 和 react-dom ：

npm install next react react-dom

打开 package.json 文件并添加 scripts 配置段：

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

这些脚本涉及开发应用程序的不同阶段：

Next.js 是围绕 page（页面）的概念构建的。page 是从 pages 目录中的.js、.jsx、.ts或.tsx文件导出的React 组件。

page 根据其文件名与路由关联。例如，pages/about.js 被映射到 /about。甚至可以在文件名中添加动态路由参数。

在你的项目中创建一个 pages 目录。

为 ./pages/index.js 文件填充如下内容：

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

要开始开发应用程序，请运行 npm run dev。这将在 http://localhost:3000 上启动开发服务器。

访问 http://localhost:3000 即可查看你的应用程序了。

到目前为止，我们得到了：

此外，任何 Next.js 应用程序从一开始就是可以投入到生产环境中的，请在我们的部署文档中阅读更多内容。