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.
We will let
create-next-app create the project directory
hello-world for us and create a page for route
Run the following in your terminal:
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/index.js to look like the following:
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
You'll notice some minor differences but essentially we can toggle back and forward between
Let's start up the development server by running
npm run dev and then visit
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
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:
This code tells Next.js to always redirect to
/ when the
NODE_ENV environment is
production. Next.js will set
production for us in production builds.
We are now ready to update
Updating the page
pages/wip.js to be the following:
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
/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:
The production code will now start up on
Head to the home page and attempt to get to
/wip. This time, we are constantly redirected to
/. Great success!
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
Photo credit: jplenio
See how you can dynamically create UIs based on React State using dynamic imports, Next.js 10 and React State
This post will go through a simple example of setting up simple authentication with a user and password to your Next.js website.
This blog post will explore the new internationalised routing in Next.js 10 and how you can use this to your advantage with react-intl for React.js
Learn how to create a test Stripe example, update that example and deploy to Vercel for a Stripe payment gateway, React 17, TypeScript 4 and Next.js 10
1,200+ PEOPLE ALREADY JOINED ❤️️
Get fresh posts + news direct to your inbox.
No spam. We only send you relevant content.