web-dev-qa-db-fra.com

Next.js passe NODE_ENV au client

Je construis un React SSR App, en utilisant Next.js.

Je souhaite pouvoir accéder à NODE_ENV côté client, car cela indiquera à mon application les points de terminaison de l'API à utiliser.

J'ai du mal à trouver une approche décente pour cela. Je voudrais définir le NODE_ENV comme une variable de fenêtre lorsque je rendrai la page sur le serveur pour la première fois, puis dans ma fonction d'assistance où je fais l'appel d'API, je vérifierais si le code est appelé sur le serveur ou le client. et en utilisant les variables window ou process.env selon les besoins.

Quelqu'un at-il une bonne solution à un tel problème? Ce doit être un problème commun, mais je ne trouve pas de bonne solution.

javascriptnode.jsreactjsenvironment-variablesnext.js
10
Jack Wild

1. Vous pouvez l’inclure dans la configuration de Webpack (en utilisant la dépendance à dotenv-webpack):

require('dotenv').config()

const path = require('path')
const Dotenv = require('dotenv-webpack')

module.exports = {
  webpack: (config) => {
    config.plugins = config.plugins || []

    config.plugins = [
      ...config.plugins,

      // Read the .env file
      new Dotenv({
        path: path.join(__dirname, '.env'),
        systemvars: true
      })
    ]

    return config
  }
}

Référence: ici

2. en utilisant le plugin babel pour importer la variable dans l’ensemble de l’application:

env-config.js

const prod = process.env.NODE_ENV === 'production'

module.exports = {
  'process.env.BACKEND_URL': prod ? 'https://api.example.com' : 'https://localhost:8080'
}

.babelrc.js

const env = require('./env-config.js')

module.exports = {
  presets: ['next/babel'],
  plugins: [['transform-define', env]]
}

index.js

export default () => (
  <div>Loading data from { process.env.BACKEND_URL }</div>
)

Référence: ici

3. Utiliser next/config:

next.config.js

module.exports = {
  publicRuntimeConfig: {
    API_URL: process.env.API_URL
  }
}

index.js

import React from 'react'
import getConfig from 'next/config'

const {publicRuntimeConfig} = getConfig()
const {API_URL} = publicRuntimeConfig

export default class extends React.Component {
  static async getInitialProps () {
    // fetch(`${API_URL}/some-path`)
    return {}
  }

  render () {
    return <div>
            The API_URL is {API_URL}
    </div>
  }
}

Référence: ici

31
Darryl R. Norbert

Utilisation de la configuration au moment de la construction de Next

@DarrylR déjà mentionné en utilisant next.config.js et Next configuration d'exécution , mais vous pouvez également utiliser Next configuration au moment de la construction .

Cela vous permet de mettre le process.env.XXXX dans le code (comme indiqué à l’étape 3 ci-dessous) et vous n’avez rien à importer. Cependant, si vous devez définir des variables env lorsque vous construisez localement avec Next.js et lorsque vous vous déployez vers ZEIT Now , je ne sais pas si vous pouvez les conserver. dans un seul fichier en utilisant cette méthode (voir l’étape 2 ci-dessous).

Les documents de configuration d'exécution suggèrent que vous souhaitiez normalement utiliser la configuration au moment de la construction:

Avertissement: Généralement, vous souhaitez utiliser la configuration au moment de la construction pour fournir votre configuration. La raison en est que la configuration d'exécution ajoute une surcharge de rendu/initialisation et est incompatible avec prérendering automatique .

Pas:

1 jeu NODE_ENV pour le processus de construction

1.1 Utiliser ZEIT Now

Si vous déployez à l’aide de ZEIT Now, vous pouvez définir le variables env utilisées lors de la construction dans now.json:

{
  "version": 2,
  "build": {
    "env": {
      "NODE_ENV": "production"
    }
  }
}

1.2 Lors de l'exécution locale (facultatif)

Si tu veux NODE_ENV à définir lors de l'exécution locale également, ceci ne sera pas défini par now.json. Cependant, vous pouvez le définir d'autres manières, telles que:

$ NODE_ENV=production npm run build

ou changez le script de compilation dans package.json à

"build": "NODE_ENV=production next build"

Vous pouvez bien sûr aussi définir NODE_ENV _ pour d’autres scripts que build si vous le souhaitez.

2. Définissez la valeur inline suivante de process.env.NODE_ENV

Ajoutez ceci au next.config.js comme décrit ici :

module.exports = {
  env: {
    NODE_ENV: process.env.NODE_ENV
  }
};

3. Utiliser dans le code

if (process.env.NODE_ENV === "production") {
  console.log("In production")
} else {
  console.log("Not in production")
}
1
ArneHugo