Setting up the home page on Next.js

Question

Does anybody know how to define any specific page in Next.js as the root (the home page)?

I have been looking online and was not able to find any concrete solutions. This is suppose to be a very common use case.

There is this other post, Using Next.js next-routes, how to define a home route for the base web page?, but it recommends creating a server for it.

Is there any "NextJs" way of setting up a Home Page?

Thanks in advance!

score 26 · Accepted Answer · edited Feb 12 '21 at 02:05

26

Here is the solution offered by nextjs.

Create or edit the file next.config.js in the root directory:

module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        destination: '/about',
        permanent: true,
      },
    ]
  },
}

Source: https://nextjs.org/docs/api-reference/next.config.js/redirects

edited Feb 12 '21 at 02:05

SherylHohman

16,580
17
88
94

answered Feb 11 '21 at 23:16

Chris Routy

276
3
4

score 4 · Answer 2 · answered Jul 25 '20 at 00:43

4

“When a file is added to the pages directory it's automatically available as a route.

The files inside the pages directory can be used to define most common patterns.”

The router will automatically route files named index to the root of the directory.

pages/index.js → /

More details: https://nextjs.org/docs/routing/introduction

answered Jul 25 '20 at 00:43

Emin TAYFUR

138
7

1

Thanks Emin! But how do you set the home page when you need it to be something else? For example, mywebsite.com/ ==> mywebsite.com/posts/my-post-1. In Next.js my-post-1 is a dynamic route. – drjorgepolanco Jul 25 '20 at 01:12
https://nextjs.org/docs/routing/introduction#injecting-the-router (—) https://nextjs.org/docs/api-reference/next/router – Emin TAYFUR Jul 25 '20 at 11:14

score 1 · Answer 3 · answered Aug 06 '20 at 07:04

I posted the answer that solved my issue in this other thread:

Next.js Redirect from / to another page

The example was taken from https://dev.to/justincy/client-side-and-server-side-redirection-in-next-js-3ile

I needed to immediately forward the user who visited my root page (mywebsite.com/) to a subpage, in this case Home: mywebsite.com/home

Pasting either of the following in my main index.js file, achieves the desired result:

There are copy-paste-level examples for

Client Side

import { useRouter } from 'next/router'

function RedirectPage() {
  const router = useRouter()
  // Make sure we're in the browser
  if (typeof window !== 'undefined') {
    router.push('/home')
  }
}

export default RedirectPage

Server Side

import { useRouter } from 'next/router'

function RedirectPage({ ctx }) {
  const router = useRouter()
  // Make sure we're in the browser
  if (typeof window !== 'undefined') {
    router.push('/home');
    return; 
  }
}

RedirectPage.getInitialProps = ctx => {
  // We check for ctx.res to make sure we're on the server.
  if (ctx.res) {
    ctx.res.writeHead(302, { Location: '/home' });
    ctx.res.end();
  }
  return { };
}

export default RedirectPage

score 0 · Answer 4 · answered Sep 28 '22 at 07:46

If anyone has a different basePath configured and wants to redirect / to a specific page then make sure to set basePath:false in redirects method in config else / will through 404

In next.config.js

module.exports = {
    async redirects() {
        return [
          {
            source: '/',
            destination:'/<your basePath>/ui/auth/login',
            permanent: true,
            basePath:false
          },
        ]
      },
    assetPrefix: '<your prefix>',
    basePath: '<your basePath>',
    //For both Server side and client side secretes
    publicRuntimeConfig: {
        
    }
}

score 0 · Answer 5 · answered Nov 17 '22 at 21:10

0

page.js should work as a homepage on each level.

https://beta.nextjs.org/docs/api-reference/file-conventions/page

answered Nov 17 '22 at 21:10

Dima Dorogonov

2,297
1
20
23

Setting up the home page on Next.js

5 Answers5