跳到主要内容
目录
信息

注意: 本文翻译自官网文档:https://nextjs.org/docs/getting-started

开始

欢迎来到 Next.js 文档！

如果你是第一次使用 Next.js，我们建议你从学习课程开始。

如果你有任何关于 Next.js 的问题，欢迎向在GitHub Discussion上的社区提问。

系统要求​

  • Node.js 14.6.0 或更高版本
  • MacOS，Windows (including WSL)，和 Linux 都支持

自动设置​

我们建议使用create-next-app创建一个新的Next.js应用程序，它会自动为你设置一切。（你不需要创建一个空目录。create-next-app会为你制作一个。）要创建一个项目，运行：

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

如果你想要从一个TypeScript项目开始，你可以使用--typescript标志：

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app --typescript

在安装完成后：

  • 运行npm run dev或yarn dev 或pnpm 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
# or
pnpm add next react react-dom

打开package.json并添加以下脚本：

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

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

  • dev - 运行 next dev，以开发模式启动 Next.js
  • build - 运行 next build，以构建用于生产环境的应用程序
  • start - 运行 next start，以启动 Next.js 生产环境服务器
  • lint - 运行 next lint，以设置 Next.js 的内置 ESLint 配置

在你应用的根目录下创建两个目录，pages 和 public：

  • pages - 根据文件名与路由相关联。举个例子，pages/about.js 将会映射到 /about
  • public - 存储如图片，字体等静态资源。public目录下的文件能够被代码通过基本的URL（/）进行访问

Next.js 是围绕着 页面（pages） 的概念构造的。一个页面（page）就是一个从 pages 目录下的 .js、.jsx、.ts 或 .tsx 文件导出的 React 组件。

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

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

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

export default HomePage

在设置完成后：

  • 运行npm run dev或yarn dev 或pnpm dev在http://localhost:3000上启动开发服务器
  • 通过http://localhost:3000来访问你的应用程序
  • 编辑pages/index.js并在浏览器中查看更新后的结果

到目前为止，我们得到：

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