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
- Basic familiarity with Create Next App.
-
create-next-appinstalled. - 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>
</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>
</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>
</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
Originally posted on my blog. To see new posts without delay, read the posts there and subscribe to my newsletter.
Top comments (0)