Next.js передает NODE_ENV клиенту - PullRequest
Новая
       13

Next.js передает NODE_ENV клиенту

0 голосов
/ 12 ноября 2018

Я создаю приложение React SSR, используя Next.js.

Я хочу иметь возможность доступа к NODE_ENV на стороне клиента, поскольку это сообщит моему приложению, какие конечные точки API использовать.

Я изо всех сил пытаюсь найти достойный подход для этого. Я хотел бы определить NODE_ENV как переменную окна, когда я сначала отображаю страницу на сервере, а затем в своей вспомогательной функции, где я выполняю вызов API, я проверю, вызывается ли код на сервере или клиенте. и, при необходимости, используя переменные window или process.env.

У кого-нибудь есть хорошее решение для такой проблемы. Должно быть, это общая проблема, но я не могу найти хороших решений.

Ответы [ 2 ]

0 голосов
/ 28 июля 2019

Использование конфигурации Next во время сборки

@ DarrylR уже упоминалось с использованием next.config.js и Следующая конфигурация времени выполнения , но вы также можете использовать конфигурацию Next * .

.

Это позволяет вам вставить process.env.XXXX прямо в код (как показано в шаге 3 ниже), и вам не нужно ничего импортировать. Однако если переменные env должны быть установлены как при локальной сборке с Next.js , так и при развертывании на ZEIT Now , я не знаю, сможете ли вы сохранить их просто один файл с использованием этого метода (см. шаг 2 ниже).

Документы по настройке среды выполнения предполагают, что вы обычно хотите использовать конфигурацию во время сборки:

Предупреждение: Как правило, вы хотите использовать конфигурацию во время сборки для обеспечения вашей конфигурации. Причина этого заключается в том, что конфигурация во время выполнения добавляет накладные расходы на рендеринг / инициализацию и является несовместимой с автоматическим предварительным рендерингом .

Шаги:

1. Установите NODE_ENV для процесса сборки

1.1 Использование ZEIT сейчас

Если вы развертываете с использованием ZEIT Now, вы можете установить переменные env, используемые во время сборки в now.json: 

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

1.2 При локальном запуске (опция)

Если вы хотите, чтобы NODE_ENV также устанавливался при локальном запуске, он не будет установлен now.json. Однако вы можете установить его другими способами, такими как: 

$ NODE_ENV=production npm run build

или измените скрипт сборки в package.json на 

"build": "NODE_ENV=production next build"

Конечно, вы также можете установить NODE_ENV для других сценариев, кроме build, если хотите.

2. Сделать следующее встроенное значение process.env.NODE_ENV

Добавьте это к next.config.js, как описано здесь : 

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

3. Используйте в коде 

if (process.env.NODE_ENV === "production") {
  console.log("In production")
} else {
  console.log("Not in production")
}
0 голосов
/ 13 ноября 2018

1.Вы можете включить его в конфигурацию веб-пакета (используя зависимость 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
  }
}

Ссылка: здесь

2.использование плагина babel для импорта переменной во все приложение:

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>
)

Ссылка: здесь

3.Используя 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>
  }
}

Ссылка: здесь

...