NextJS getStaticProps With Components

Ever needed to fetch some content from your server to populate a global component, only to realize that NextJS doesn't allow for that out of the box? A project I worked on had a global navigation bar that was imported on 202 different pages, but needed pre-generated static content that came from a CMS. Instead of using getStaticProps on every single page, I decided to dive in and see if I could pre-generate all that content a single time, and import it directly into the component.

The way the team decided to get around this getStaticProps page restriction is to use the NodeJS build process to fetch content from wherever we need, and put it into the project for our components to import as standard json files. We can even do different versions based on dev and production environments.

Setup

Find a nice place in your project directory to add in your preBuildScripts folder (you can name this whatever you want). In my project directory I have:

src -> functions -> preBuildScripts

If you have a single environment that you deploy to, you'll only need two files. For each additional environment, you'll need an additional file to run. In this example, we'll be building files for a Development environment, and a Production environment.

New Files:

preBuildUtilities.js
preBuildDev.js
preBuildProd.js

Setting Up A Test

Inside your preBuildUtilities.js, add in this module exports code that looks like this:

module.exports.preBuildDevelopment = async() => {
    console.log("Loading the development content!")
}

module.exports.preBuildProduction = async() => {
    console.log("Loading the production content!")
}

Now inside each of your other files, we can call the respective functions

preBuildDev.js

const {preBuildDevelopment} = require("./preBuildUtilities.js")

preBuildDevelopment();

preBuildProd.js

const {preBuildProduction} = require("./preBuildUtilities.js")

preBuildProduction();

And now our setup is pretty much done! The way we call these functions is simple. NPM automatically runs scripts in the package.json file that have the prefix of pre. You can read more about that here: https://docs.npmjs.com/cli/v8/using-npm/scripts#life-cycle-scripts

Updating Your Package.json File

Open up your package.json and find your scripts section that shows:

"scripts": {
    "dev": "next dev",
    "build": "next build"
}

and add in a new script above that one like so:

Multiple Environment Example

"scripts": {
    "predev": "node src/functions/preBuildScripts/preBuildDev.js",
    "dev": "next dev",

    "prebuild:dev": "node src/functions/preBuildScripts/preBuildDev.js",
    "build:dev": "next build",

    "prebuild:prod": "node src/functions/preBuildScripts/preBuildProd.js",
    "build:prod": "next build"
}

Single Environment Example

Here is an example of a single environment setup: