NextJS 创建项目和环境变量配置_npx create-next-app

NextJS 创建项目和环境变量配置

1、创建项目

安装设置

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

npx create-next-app@latest
# or
yarn create next-app
1
2
3

如果你希望使用 TypeScript 开发项目，可以通过 --typescript 参数创建 TypeScript 项目：

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
1
2
3

安装完成后:

运行 npm run dev 或 yarn dev 来启动开发服务器，访问地址为 http://localhost:3000。
端口可以自定义
在 package.json 中更改 -p 3001

  "scripts": {
    "dev": "next dev -p 3001"
  },
1
2
3

页面（Pages）

在 Next.js 中，一个 page（页面） 就是一个从 .js、jsx、.ts 或 .tsx 文件导出（export）的 React 组件 ，这些文件存放在 pages 目录下。每个 page（页面）都使用其文件名作为路由（route）。

示例： 如果你创建了一个命名为 pages/about.js 的文件并导出（export）一个如下所示的 React 组件，则可以通过 /about 路径进行访问。

function About() {
  return <div>About</div>
}

export default About
1
2
3
4
5

具体内容官网介绍很详细 请参照 NextJs中文文档

2、环境变量

NODE_ENV不是process.env对象上原有的属性，它是我们自己添加上去的一个环境变量，用来确定当前所处的开发阶段。一般生产阶段设为production，开发阶段设为development，然后在脚本中读取process.env.NODE_ENV

在入口页面打印

console.log(process.env.NODE_ENV)
1

值为development

执行

npm run build 
npm run start
1
2

process.env.NODE_ENV值为production

使用cross-env去设置变量

当您使用NODE_ENV =production, 来设置环境变量时，Windows命令提示将会阻塞(报错)。
cross-env可以跨平台的设置和使用环境变量。
安装：

npm install --save-dev cross-env
1

在项目中创建对应环境变量的文件

.env.development

NODE_ENV=development
NEXT_PUBLIC_API=https://dev.api.com
1
2

.env.production

NODE_ENV=production
NEXT_PUBLIC_API=https://prod.api.com
1
2

.env.test

NODE_ENV=test
NEXT_PUBLIC_API=https://test.api.com
1
2

在 package.json 中更改

 "scripts": {
    "dev": "cross-env NODE_ENV=development next dev -p 3001",
    "build": "next build",
    "build:test": "cross-env NODE_ENV=test next build",
    "start": "next start",
  },
1
2
3
4
5
6

执行

npm run build:test
npm run start
1
2

打印

console.log(process.env.NEXT_PUBLIC_API)
1

process.env.NEXT_PUBLIC_API 值为 https://test.api.com
比如我们在axios请求中，就可以把它的baseURL设置为 process.env.NEXT_PUBLIC_API

使用cross-env打包单个对应页面

有些时候我们可能需要输出单个活动页来给客户展示，但是又不想每次都新建个项目，我们可以统一放在这个项目中管理，然后单独打包出指定页面。

新建文件/tools/config.js

module.exports =  {
  oneProject: {
    '/home': { page: '/home' },
  },
  twoProject: {
    '/about': { page: '/about' },
  },
}
1
2
3
4
5
6
7
8

打开next.config.js并添加以下exportPathMap配置

const config =  require('./tools/config')
let projectName = process.env.PROJECT_NAME
console.log(projectName)

const nextConfig = {
  exportPathMap: async function () {
    return config[projectName]
  }
}
1
2
3
4
5
6
7
8
9

在 package.json 添加

"scripts": {
    "dev": "cross-env NODE_ENV=development next dev -p 3001",
    "build": "next build && next export",
    "build:test": "cross-env NODE_ENV=test next build",
    "build:oneProject": "cross-env PROJECT_NAME=oneProject next build && next export",
    "build:twoProject": "cross-env PROJECT_NAME=twoProject next build && next export",
    "start": "next start",
    "lint": "next lint"
  }
1
2
3
4
5
6
7
8
9

在pages下面新建两个页面 /home 和 /about
如果使用了.env.production方式 在此文件中也要添加PROJECT_NAME
执行 npm run build:oneProject 我们可以看到根目录中out下面只有home页面 没有about

执行 npm run build:twoProject