# 快速开始
欢迎阅读 Next.js 文档！
如果你是初学 Next.js，我们建议你从 互动课程 开始。
通过这些带小测验的互动课程你将学到使用 Next.js 所需的全部知识。
如果你有任何与 Next.js 相关的问题，欢迎随时在 GitHub Discussions 上向我们的社区寻求帮助。
# 系统环境需求
Node.js 12.22.0或更高版本- MacOS、Windows (包括 WSL) 和 Linux 都被支持
# 安装设置
我们建议使用 create-next-app创建新的 Next.js 应用程序，它会自动为你设置所有内容。创建项目，请运行：
npx create-next-app@latest
# or
yarn create next-app
如果你希望使用 TypeScript 开发项目，可以通过 --typescript参数创建 TypeScript 项目：
npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
安装完成后:
- 运行
npm run dev或yarn dev来启动开发服务器，访问地址为http://localhost:3000。 - 通过
http://localhost:3000地址访问你的应用程序。 - 编辑
pages/index.js文件并在浏览器中查看更新。
有关使用 create-next-app的更多信息，请查看 create-next-app 文档 。
# 手动安装设置
为你的项目安装 next、react和 react-dom：
npm install next react react-dom
# or
yarn add next react react-dom
打开 package.json文件并添加 scripts配置段：
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
这些脚本涉及开发应用程序的不同阶段：
dev- 运行next dev，以开发模式启动 Next.jsbuild- 运行next build，以构建用于生产环境的应用程序start- 运行next start，以启动 Next.js 生产环境服务器lint- 运行next lint，以设置 Next.js 的内置 ESLint 配置
Next.js 是围绕着 页面（pages） 的概念构造的。一个页面（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
到目前为止，我们得到了：
- 自动编译和打包（利用 webpack 和 babel）
React 快速刷新./pages/中的静态生成和服务器端渲染静态文件服务。./public/被映射到/
此外，任何 Next.js 应用程序从一开始就是可以投入到生产环境中的，请在我们的 部署文档 中阅读更多内容。
# 相关内容
接下来，建议学习以下章节：
Pages：进一步了解 Next.js 中的所谓 pages 是什么。 CSS 的支持：使用内置的 CSS 支持向应用程序添加自定义样式。 CLI了解有关 Next.js CLI 的更多信息。
页面 →