# Dev Only Next.js Routes

> A method to protect your Next.js routes from being accessed in production.

- Canonical: https://dennisokeeffe.com/blog/2021-07-25-dev-only-nextjs-routes
- Published: 2021-07-25
- Updated: 2021-07-25
- Tags: beginner, nextjs, javascript

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](https://github.com/okeeffed/nextjs-dev-only-routes).

## Prerequisites

1. Basic familiarity with [Create Next App](https://nextjs.org/docs/api-reference/create-next-app).
2. `create-next-app` installed.
3. Basic familiarity with [Next.js](https://nextjs.org/).

## 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:

```s
$ 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:

```js
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`:

```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`](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering):

```js
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:

```js
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:

```js
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:

```s
# 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

1. Basic familiarity with [Create Next App](https://nextjs.org/docs/api-reference/create-next-app).
2. Basic familiarity with [Next.js](https://nextjs.org/).

_Photo credit: [jplenio](https://unsplash.com/@jplenio)_