Sponsored

How to Change Home Page to Use a Different File in NextJS

Jasser Mark Arioste

Jasser Mark Arioste

How to Change Home Page to Use a Different File in NextJS

Hello hustler. In this short tutorial, you'll learn how to change the home page to point to another file in a NextJS Application. Learn how to go around the file-based routing of NextJS.

Sponsored

The Problem#

I had one requirement once in my project and the /index route is different from the / route. The problem is NextJS uses file-based routing and it automatically uses index.tsx as the home(/) route. 

Sponsored

The Solution #

To implement this requirement, I did the following:

  1. Remove the index.tsx file from the /pages directory, so that NextJS will not see a home page route.
  2. Create a file pages/home.tsx  for the / route.
  3. Create a file pages/my-index.tsx for the /index route.
  4. Use rewrites and redirects inside next.config.js to wire up the routing.

After the first three steps, the folder structure will look like this:

|- /pages
   |- home.tsx
   |- my-index.tsx
   |- _app.tsx
|- tsconfig.json
|- package.json
|- next.config.js
123456

Since we don't have the pages/index.tsx file, navigating to / will return us the 404 page:

NextJS Home page returns 404

To fix this, let's use rewrites() in next.config.js to point the routes to the correct files. Rewrites allow you to map an incoming request path to a different destination path.

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  async rewrites() {
    return [
      {
        source: "/",
        destination: "/home",
      },
      {
        source: "/index",
        destination: "/_index",
      },
    ];
  },
};

module.exports = nextConfig;
1234567891011121314151617181920

After changing next.config.js, restart your local server.

Now, navigating to / and /index routes should render correctly:

NextJS Home page
NextJS change the /index route.

Next, let's prevent users from accessing /home and /my-index routes. Use redirects() in next.config.js to redirect /home and /my-index to the correct destination:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  ...
  async redirects() {
    return [
      {
        source: "/home",
        destination: "/",
        statusCode: 301,
      },
      {
        source: "/my-index",
        destination: "/index",
        statusCode: 301,
      },
    ];
  },
};

module.exports = nextConfig;
1234567891011121314151617181920212223

Now navigating to /home will redirect to / and navigating  to /my-index will redirect to /index.

Sponsored

Conclusion#

Although file-based routing is great in NextJS, it still has some limitations. Rewrites and Redirects are incredibly powerful when used correctly and it allows us to work around the limitations of file-based routing.

If you like this tutorial, please leave a like or share this article. For future tutorials like this, please subscribe to our newsletter or follow me on Twitter.

Sponsored

Resources#

Sponsored

Related Posts#

Credits: Image by Eiji Kikuta from Pixabay

Share this post!

Related Posts

Sponsored

Subscribe to our newsletter

Get up-to-date on latest articles on react.js, node.js, graphql, full-stack web development. No Spam. Helpful articles to improve your skills. Sent directly to your inbox.