系统环境需求
- 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
文档。
手动安装设置
为你的项目安装 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"
}
这些脚本涉及开发应用程序的不同阶段:
dev
– 运行next dev
,以开发模式启动 Next.jsbuild
– 运行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
即可查看你的应用程序了。
到目前为止,我们得到了:
- 自动编译和打包(利用 webpack 和 babel)
- React 快速刷新
./pages/
中的 静态生成和服务器端渲染- 静态文件服务。
./public/
被映射到/
作者:terry,如若转载,请注明出处:https://www.web176.com/nextjs/2488.html