CODEWITHSUNDEEP
reactjsnext.js
epicrato
epicrato

Reputation: 8428

Setting up the home page on Next.js

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!

Upvotes: 21

Views: 47988

Answers (6)

CrackerKSR
CrackerKSR

Reputation: 1926

When creating a Next.js project with app routing, follow these steps: A. To create a page for the root path (/), create app/page.js. B. To create a page for the /home path, create app/home/page.js.

app
|--page.js (serves at path /)
|--home
    |--page.js (serves at path /home)

Bonus: If you want both '/home' and '/' to serve your home page component then you have two options here. A. use middleware B. or next.config.js to redirect '/home' to '/' or vice versa.

To create a middleware redirect, create middleware.js in the app directory and export a function named middleware or use the export default syntax. The function should check the path and redirect accordingly.

Example: I want to redirect '/home' to '/'

// app/middleware.js
import { NextResponse } from 'next/server'
 
export function middleware(request) {

  if (request.nextUrl.pathname.startsWith('/home')) {
    return NextResponse.redirect(new URL('/', request.url))
  }

}

Upvotes: 1

Amber
Amber

Reputation: 31

Create a page.jsx file in the App Router directory.

As of NextJS version 13, app/page.jsx replaces pages/index.js.

For more, see https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration#step-2-creating-a-root-layout.

Pages and App Directories Defined Routes

Upvotes: 1

Dima Dorogonov
Dima Dorogonov

Reputation: 2563

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

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

Upvotes: 0

Nithya
Nithya

Reputation: 782

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: {
        
    }
}

Upvotes: 0

Chris Routy
Chris Routy

Reputation: 356

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

Upvotes: 34

epicrato
epicrato

Reputation: 8428

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

Upvotes: 1

Related Questions