Next.js教程基本特性:快速开始

系统环境需求

  • Node.js 10.13 或更高版本
  • MacOS、Windows (包括 WSL) 和 Linux 都被支持

安装设置

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

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

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

有关使用 create-next-app 的更多信息,请查看 create-next-app 文档。

手动安装设置

为你的项目安装 nextreact 和 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"
}

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

  • dev – 运行 next dev,以开发模式启动 Next.js
  • build – 运行 next build,以构建用于生产环境的应用程序
  • start – 运行 next start,将启动 Next.js 生产环境服务器

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

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

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

到目前为止,我们得到了:

作者:terry,如若转载,请注明出处:https://www.web176.com/nextjs/2488.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年4月21日 下午1:41
下一篇 2021年4月27日 下午5:23

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注