DEV Community

Cover image for Dev Only Next.js Routes
Dennis O'Keeffe
Dennis O'Keeffe

Posted on • Originally published at blog.dennisokeeffe.com

Dev Only Next.js Routes

I write content for AWS, Kubernetes, Python, JavaScript and more. To view all the latest content, be sure to visit my blog and subscribe to my newsletter. Follow me on Twitter.

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

  1. Basic familiarity with Create Next App.
  2. create-next-app installed.
  3. 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
Enter fullscreen mode Exit fullscreen mode

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>


      </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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>


      </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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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: "/",
    },
  };
};
Enter fullscreen mode Exit fullscreen mode

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: {} };
};
Enter fullscreen mode Exit fullscreen mode

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>


      </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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

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

Photo credit: jplenio

Originally posted on my blog. To see new posts without delay, read the posts there and subscribe to my newsletter.

Discussion (0)