Dev Only Next.js Routes

This post will demonstrate how to create a helper to redirect from pages in Next.js that you want to leave for development only.

The redirects will occur serverside.

Source code can be found here.

Prerequisites

Basic familiarity with Create Next App.
create-next-app installed.
Basic familiarity with Next.js.

Getting started

We will let create-next-app create the project directory hello-world for us and create a page for route /wip.

Run the following in your terminal:

$ npx create-next-app hello-world
# ... creates Next.js app for us
$ cd hello-world
# Create a demo work-in-progress route to only be used in development
$ touch pages/wip.js

At this stage, a working Next.js app is ready for us.

Setting up the pages

In our demo, we want to update the home page pages/index.js and copy across similar code for our work-in-progress page pages/wip.js.

Update pages/index.js to look like the following:

import Head from "next/head";
import styles from "../styles/Home.module.css";
import Link from "next/link";

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 style={{ marginBottom: "12px" }} className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <Link href="/wip" passHref>
          <a style={{ color: "blue" }}>Go to WIP</a>
        </Link>
      </main>
    </div>
  );
}

We are doing some basic style here but the main part to note is that we are using the Link component from next/link to update our website to /wip on click.

Let's do a similar job for pages/wip.js:

import Head from "next/head";
import styles from "../styles/Home.module.css";
import Link from "next/link";

export default function Wip() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 style={{ marginBottom: "12px" }} className={styles.title}>
          WIP
        </h1>

        <Link href="/" passHref>
          <a style={{ color: "blue" }}>Home</a>
        </Link>
      </main>
    </div>
  );
}

You'll notice some minor differences but essentially we can toggle back and forward between / and /wip.

Let's start up the development server by running npm run dev and then visit http://localhost:3000.

Once started, note that you can click back and forward on the browser.

Adding a helper to redirect WIP to home in production

In general, when you want to do a server-side redirect you can use the Next.js function getServerSideProps:

export const getServerSideProps = () => {
  return {
    redirect: {
      permanent: false,
      destination: "/",
    },
  };
};

The above code would always redirect the page it is added to back to the home page.

What we want to do is create a helper that redirects to /wip when in production but otherwise renders as expected.

We can do this by modifying the above code and abstracting it out for reusability.

Create a file utils/devOnly.js from the root of your project and add the following:

export const devOnly = () => {
  if (process.env.NODE_ENV === "production") {
    return {
      redirect: {
        permanent: false,
        destination: "/",
      },
    };
  }

  return { props: {} };
};

This code tells Next.js to always redirect to / when the NODE_ENV environment is production. Next.js will set NODE_ENV to production for us in production builds.

We are now ready to update pages/wip.js.

Updating the page

Update pages/wip.js to be the following:

import Head from "next/head";
import styles from "../styles/Home.module.css";
import Link from "next/link";
// ! Added
import { devOnly } from "../utils/devOnly";

export default function Wip() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 style={{ marginBottom: "12px" }} className={styles.title}>
          WIP
        </h1>

        <Link href="/" passHref>
          <a style={{ color: "blue" }}>Home</a>
        </Link>
      </main>
    </div>
  );
}

// ! Added
export const getServerSideProps = devOnly;

All we do is import our new helper function from the relative path it lives in and add export const getServerSideProps = devOnly; to the bottom of the file. Easy as pie!

Trying out our helper in development

If you have stopped your server, run npm run dev again. You'll notice that you can still click back and forward from / to /wip. This is expected as NODE_ENV is set to development in development mode.

To test production, we can run the following to start a production build:

# Make a production build
$ npm run build
# Run the production code
$ npm start

The production code will now start up on http://localhost:3000.

Head to the home page and attempt to get to /wip. This time, we are constantly redirected to /. Great success!

Summary

Today's post demonstrated how to protect development-only routes that you are not ready to deploy to production. We also saw how to use a helper to abstract out code that is only needed in development.

Resources and further reading

Basic familiarity with Create Next App.
Basic familiarity with Next.js.

Photo credit: jplenio

Dennis O'Keeffe

@dennisokeeffe92

Melbourne, Australia

Hi, I am a professional Software Engineer. Formerly of Culture Amp, UsabilityHub, Present Company and NightGuru.

I am currently working on Visibuild.

Dev Only Next.js Routes

Introduction

Dev Only Next.js Routes

Prerequisites

Getting started

Setting up the pages

Adding a helper to redirect WIP to home in production

Updating the page

Trying out our helper in development

Summary

Resources and further reading

Dennis O'Keeffe

Get fresh posts + news direct to your inbox.

Share this post