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

这篇具有很好参考价值的文章主要介绍了NextJS 创建项目和环境变量配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

1、创建项目

安装设置

使用 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。
端口可以自定义
在 package.json 中更改 -p 3001

  "scripts": {
    "dev": "next dev -p 3001"
  },

页面(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

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

2、环境变量

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

在入口页面打印

console.log(process.env.NODE_ENV)

值为development

执行

npm run build 
npm run start

process.env.NODE_ENV值为production

使用cross-env去设置变量

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

npm install --save-dev cross-env

在项目中创建对应环境变量的文件
NextJS 创建项目和环境变量配置
.env.development

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

.env.production

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

.env.test

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

在 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",
  },

执行

npm run build:test
npm run start

打印

console.log(process.env.NEXT_PUBLIC_API)

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' },
  },
}
打开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]
  }
}
在 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"
  }

在pages下面新建两个页面 /home 和 /about
如果使用了.env.production方式 在此文件中也要添加PROJECT_NAME
执行 npm run build:oneProject 我们可以看到根目录中out下面只有home页面 没有about
NextJS 创建项目和环境变量配置
执行 npm run build:twoProject
NextJS 创建项目和环境变量配置文章来源地址https://www.toymoban.com/news/detail-422369.html

到了这里,关于NextJS 创建项目和环境变量配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue项目根据不同环境动态配置接口请求ip及全局变量(vue环境变量配置)

    在项目的开发过程中,我们常常会遇到根据不同的环境需要切换不同的ip的问题,例如在项目部署到测试服时需要将接口请求ip替换成测试服的ip,部署到正式服时又需要将接口请求ip替换成正式服对应的ip,有些公司还有预发环境等,这样在每次部署不同环境的项目前都需要先手

    2024年02月02日
    浏览(55)
  • Php+Nginx项目配置信息配置到环境变量

    通过nginx,配置到nginx.conf里面 fastcgi_param key “value”; 在php中通过 $_SERVER[\\\"key\\\"] 即可读取

    2024年02月05日
    浏览(44)
  • 【项目实战】在win10上安装配置Hadoop的环境变量

    注意:该教程适用于:远程连接Linux上的Hadoop集群,因此本步骤是不需要在本地再下载hadoop的 在win10操作系统上,运行Hadoop以及其相关依赖包(比如Hbase依赖包)时,我遇到的情况是,我需要使用SpringBoot+Phoenix的组合去连接Hbase这往往是需要在本机(Windows 10)上安装配置 Hado

    2024年02月12日
    浏览(51)
  • Python3 安装、环境变量配置、PyCharm新建Python项目

    Pyhton官网下载最新稳定版的安装包:  找到合适的版本进行下载: 如果下载较慢,此处提供一个3.10.11的稳定版本的安装包: 链接:https://pan.baidu.com/s/16GnWjkGFuSfWfaI9UVX8qA?pwd=4u5o  提取码:4u5o  注意:此安装包解压后即可,不用安装程序! 解压或安装后的目录,可以看到对应的

    2024年02月13日
    浏览(61)
  • vue项目(vue-cli)配置环境变量和打包时区分开发、测试、生产环境

    在自定义配置Vue-cli 的过程中,想分别通过.env.development .env.test .env.production 来代表开发、测试、生产环境。 本来想使用上面三种配置来区分三个环境,但是发现使用test来打包后在测试环境会报错,报错信息: Uncaught ReferenceError: exports is not defined 本来以为真的是程序出现什么

    2023年04月08日
    浏览(77)
  • Flutter之配置环境创建第一个项目

    随着时代发展,使用Flutter开发的项目越来越多,于是踏上了Flutter开发之路。 作为一个Android开发人员,也只能被卷到与时俱进,下面一起创建一个Flutter项目吧。 一、Android开发,电脑上已经具备了的条件: 1. Java SE 安装配置:         下载 https://www.oracle.com/java/technologi

    2024年01月16日
    浏览(43)
  • Azure kinect (二)项目创建和环境配置

    在此之前,你需要安装Microsoft Visual Studio,本人先使用的是2019版本,后转用2022版本,如版本问题对项目创建和环境配置产生影响,欢迎咨询。 新建一个C++空项目 创建完成后,将是以下界面,已经熟悉Visual Studio的朋友们可跳过, 右键项目,进入属性设置 在链接器 -- 输入 —

    2024年02月10日
    浏览(39)
  • 华为云云耀云服务器L实例评测|安装Java8环境 & 配置环境变量 & spring项目部署 &【!】存在问题未解决

    1.华为云服务器安装Java8环境配置; 2.上传jar包,运行jar包,控制台开放端口; 3.访问失败以及问题排查,未解决【!】 当前内存状态 查看当前路径 让配置生效 查看文件 运行打包好的jar包 http://124.70.138.34/doc.html 1.进程kill -9 运行窗口退出 2.ctrl c退出 开放8080端口 运行jar包,也

    2024年02月09日
    浏览(61)
  • .Net Core项目在linux部署实战 1.sdk下载 2.环境变量配置/ect/profile 3.运行

    1)下载.net core sdk https://download.visualstudio.microsoft.com/download/pr/01292c7c-a1ec-4957-90fc-3f6a2a1e5edc/025e84c4d9bd4aeb003d4f07b42e9159/dotnet-sdk-6.0.418-linux-x64.tar.gz 2)配置下环境变量  step1: // 解压到指定目录  我们可以看出来,$HOME就是root  step2: // 通过vim或者终端配置下环境变量,这样子是永久生

    2024年01月17日
    浏览(38)
  • 2023 Pycharm 给项目配置解释器 基于已经创建的conda虚拟环境

    我在2019年开始使用Pycharm作为python的IDE,最近配置解释器时,法线网上的方法大概过时了,自己尝试了好多次才发现新版本的Pycharm的解释配置方法,故记于此 我是用conda管理环境的,我已经创建好一个虚拟环境,并安装我所需要的Python包。现在我想在Pycharm项目中配置解释器,

    2024年02月08日
    浏览(76)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包