https://github.com/tusbar/next-runtime-dotenv

Expose environment variables to the runtime config of Next.js
https://github.com/tusbar/next-runtime-dotenv

configuration dotenv environment nextjs plugin runtime

Last synced: about 1 month ago
JSON representation

Expose environment variables to the runtime config of Next.js

• Host: GitHub
• URL: https://github.com/tusbar/next-runtime-dotenv
• Owner: tusbar
• Created: 2018-03-30T11:40:08.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-04-24T23:02:50.000Z (over 1 year ago)
• Last Synced: 2024-11-06T18:01:32.462Z (about 1 month ago)
• Topics: configuration, dotenv, environment, nextjs, plugin, runtime
• Language: JavaScript
• Homepage:
• Size: 1.86 MB
• Stars: 161
• Watchers: 1
• Forks: 4
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# next-runtime-dotenv

> Expose environment variables to the runtime config of Next.js

[![npm version](https://badgen.net/npm/v/next-runtime-dotenv)](https://www.npmjs.com/package/next-runtime-dotenv)

[![codecov](https://badgen.net/codecov/c/github/tusbar/next-runtime-dotenv)](https://codecov.io/gh/tusbar/next-runtime-dotenv)

[![XO code style](https://badgen.net/badge/code%20style/XO/cyan)](https://github.com/xojs/xo)

## CI

[![Tests](https://github.com/tusbar/next-runtime-dotenv/actions/workflows/tests.yml/badge.svg)](https://github.com/tusbar/next-runtime-dotenv/actions/workflows/tests.yml)

[![Release](https://github.com/tusbar/next-runtime-dotenv/actions/workflows/release.yml/badge.svg)](https://github.com/tusbar/next-runtime-dotenv/actions/workflows/release.yml)

## Getting started

```bash

$ yarn add next-runtime-dotenv

```

This [Next.js](https://github.com/zeit/next.js) plugin uses [dotenv](https://github.com/motdotla/dotenv) to expose environment variables to the Next.js runtime configuration.

It requires `[email protected]`.

## Usage

This module exposes a function that allows to configure a Next.js plugin.

In your `next.config.js`:

```js

const nextRuntimeDotenv = require('next-runtime-dotenv')

const withConfig = nextRuntimeDotenv({

  // path: '.env',

  public: [

    'MY_API_URL'

  ],

  server: [

    'GITHUB_TOKEN'

  ]

})

module.exports = withConfig({

  // Your Next.js config.

})

```

Then in your page, use the configuration values as such:

```js

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 (

    


      My API URL is {MY_API_URL}

    

  )

}


export default HomePage

```

## Serverless deployment

This module is not compatible with serverless deployment as `publicRuntimeConfig` and `serverRuntimeConfig` from `next/config` will not be exposed.

You should use [build-time configuration](https://github.com/zeit/next.js#build-time-configuration).

## Phases

This plugin leverages `[email protected]` and build phases. It exposes a plugin function in order to run the plugin only when running the server (`PHASE_DEVELOPMENT_SERVER` and `PHASE_PRODUCTION_SERVER`).

## License

MIT

## Miscellaneous

```

    ╚⊙ ⊙╝

  ╚═(███)═╝

 ╚═(███)═╝

╚═(███)═╝

 ╚═(███)═╝

  ╚═(███)═╝

   ╚═(███)═╝

```