React / Next. js рекомендуемый способ установки констант, таких как URL-адреса бэкэнд-API - PullRequest
Новая
       4

React / Next. js рекомендуемый способ установки констант, таких как URL-адреса бэкэнд-API

0 голосов
/ 23 февраля 2020

Я просматриваю next.js документацию и пытаюсь понять, что такое предлагаемый подход для настройки URL, которые меняются в разных средах. В основном, я хочу убедиться, что я правильно указываю внутренние URL-адреса в процессе разработки по сравнению с производством.

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

1 Ответ

0 голосов
/ 23 февраля 2020

Вы можете настроить следующее приложение, используя next-runtime-dotenv, оно позволяет указывать serverOnly / clientOnly значения, используя следующую конфигурацию времени выполнения.

Тогда в каком-то компоненте 

import getConfig from 'next/config'

const {
  publicRuntimeConfig: {MY_API_URL},  // Available both client and server side
  serverRuntimeConfig: {GITHUB_TOKEN} // Only available server side
} = getConfig()

function HomePage() {
  // Will display the variable on the server’s console
  // Will display undefined into the browser’s console
  console.log(GITHUB_TOKEN)

  return (
    <div>
      My API URL is {MY_API_URL}
    </div>
  )
}

export default HomePage

Если вам не нужно это разделение, вы можете использовать dotenv lib для загрузки вашего .env файла и настройки с ним свойства env Next. 

// next.config.js

require('dotenv').config()
module.exports = {
  env: {
    // Reference a variable that was defined in the .env file and make it available at Build Time
    TEST_VAR: process.env.TEST_VAR,
  },
}

Проверьте этот пример with-dotenv .

...