Creating Globally Accessible Variables and Configuration Files in Next.js

Introduction

Global variables all you to store and access data across various parts of your website or application. This can be useful when you have a variety of functions or modules which need to have access to the same data without explicitly passing it between them. This helps reduce duplicate instances of the same data.

Global variables can be particularly useful in storing configuration settings that are common across multiple pages or components in a website. You might for example store the base URL of your API endpoints or the name of your website. Centralising your site or apps configuration makes it much easier to manage settings in one place.

In this tutorial we'll go over the basics of setting up a global configuration file in Next.js and how to access the data from pages and components.

Note: Global config files shouldn't contain sensitive information, in which case you should use environment variables instead

Prerequisites

For this tutorial you will need access to a terminal with npm installed and an IDE (like VS Code).

Getting started

We're going to start with fresh Next.js project in this tutorial. To get started, run npx create-next-app@latest from an empty directory in the terminal.

During setup, configure the project like so (you can configure however you want but the tutorial will be easier to follow if you use a 'src/' directory):

√ What is your project named? ... nextjs-global-config
√ Would you like to use TypeScript with this project? Yes
√ Would you like to use ESLint with this project? ... Yes
√ Would you like to use Tailwind CSS with this project? ... No
√ Would you like to use `src/` directory with this project? ... Yes       
√ Use App Router (recommended)? ... Yes
√ Would you like to customize the default import alias? ... No

Now from the project directory run npm run dev in the terminal and open localhost:3000 (or whatever URL is shown in the terminal).

It should look something like this:

Creating a global config

Create a new file nextjs-global-config/src/app/app.config.js:

Here we can add whatever global variables we may need for our site.

Accessing variables from the global config

Now in src/app/page.tsx we can add an import for our global configuration file and access the data within (note lines 3 and 9):

Now when we look at our app we can see our site title is being pulled from the global configuration file:

That's it! It's really easy to setup global variables in NextJS which can save you time and headaches later on during the development of your website or application.

Next steps

We can use this same approach for other tasks such as localising content into different languages. Try building on the example by adding more configurations (eg. Set global navigation links from the config).

View the complete project on GitHub