Cattern

Cattern

Nextjs Npm Environment Variables

Author: Kajack

Optimizing Your Next.js dev environment for static builds

In a previous blog I described the different settings for a Next.js static build versus running the application locally in development mode. In this article, we will look at how to automate your project settings for running development mode locally and for static production builds. We will be demonstrating how to use environment variables to configure your Nextjs app to have shareable links with .html extensions and work too! Unfortunately the shareable links is not compatible with your local dev server, so we will fix that by disabling shareable links only when we >npm run dev .

Typical package.json file

In your original nextjs setup you probably had something like this in your package.json:

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

You probably have more settings than this, but for static builds and testing on your local dev server , these are the 2 importants ones to us.

Adding an environment variable

I have added one environment variable called RUN_TYPE . Here is how it looks in my package.json file.

"scripts": 
{      
    "dev": "env RUN_TYPE=dev next dev",      
    "build": "env RUN_TYPE=static next build",        
}

This is a little different than the common use of environment files .env and .env.production, because we are either building our code for a static build site and output to our .dist folder, or we are using our dev server locally to write and test the code. Since a static build is not dynamic with a database feeding the content, we do not need database credentials. If your site needs credentials then a static build is probably not a good choice.

Verify the environment setting is running with out errors

After adding the RUN_TYPE var to our package.json file we can test it. If you got it right you will see your env param, hopefully without errrors.

my_blog_app$ npm run dev

> dev
> env RUN_TYPE=dev next dev

   ▲ Next.js 14.1.1
   - Local:    http://localhost:3000

 ✓ Ready in 1791ms

Now we are ready to automate our dist folder setting

In my code and the previous article we commented out the dist folder setting in the next.config.js file when we wanted to run our app locally for development. Now we can do this to activate the dist folder when we need it, and disable it for >npm run dev .

 module.exports = {
    distDir: (process.env.RUN_TYPE === 'static') 
        ? 'dist' // for npm run build
        : undefined, // for npm run dev
    output: 'export',
    images: {
        unoptimized: true,
    },

Next we enable or disable our shareable links

The shareable links with .html page extensions is only for our /dist static build, so here is how I handled that in my index.js / Home page.

export default function Home({ allPostsData }){

// for friendly shareable links in static builds
let linkExt = (process.env.RUN_TYPE === 'static') 
    ? '.html' // for >npm run build
    : ''; // for >npm run dev

return (
    <Layout home> ...

Now that we have a file extension in a var we can add it to our blog links like this

<Link href={`/posts/${id}${linkExt}`}>
    {title}
</Link>

I hope, this will help you be more productive and make fewer mistakes in deploying static build NextJs applications.

Sincerely Kajack