Question 120990 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Nextjs 13 app directory how to specify a route folder for the home page

In Nextjs with the experimental app directory I want to specify a layout, error, loading, …ect for the entire app and then have a layout, error, loading, …ect for the home page that is unique to the home page. This can easily be done with every other page in the app by just creating a folder and then placing those files in it. But I cannot seem to figure out how to specify a folder for the home page. Everything for the home page is just at the root of the app directory which is used by the entire app as well as the home page. It seems like you should just be able to specify an index directory and treat it like any other page in your app but this is not the case. I can’t seem to find any kind of documentation on how to handle this. Is this just a feature of Next13. If so it seems a bit strange that you can specify route specific pages, layouts, errors, …ect for every page in your app but not the home page.

So how do you go about specifying a directory for the home page in Nextjs 13 with the app directory file structure?

Tags:

3

Answers


  1. 0

    You can use an getInitialProps function in _app page to redirect all input to specific page to what you want:

    MyApp.getInitialProps = async ({ctx}) => {
  // if the request is for the / , redirect to /home
  if (ctx.req.url === '/') {
    ctx.res.writeHead(302, { Location: '/home' });
    ctx.res.end();
  }

  return {};
};
    Login or Signup to reply.
  2. 0

    The idea is to have layout (only with html and body tag) and error page in /app directory (to serve / index page), and everything else in a routing group.

      - /app
    layout.tsx //this should be a plain root layout
    page.tsx 
  - (others)  // note the ( ) as this is a routing group
      layout.tsx
    - /about
        page.tsx
    - /post
        page.tsx

    For your home page, you should not use layout.tsx for your other elements other than just the html and body tag, you can put your layout in page.tsx (or import as component).

    Redirect method

    Or simply redirect home page to a specific folder

    // you can also do it in middleware once its available
export default async function Home({ params }) {
    redirect('/home');
    return
}

    Do remember /app directory is still in beta, so many issues are still being ironed out. Requests or bug reports should be sent to their repository.

    Login or Signup to reply.
  3. 0

    Check out the Nextjs routing groups Nextjs Routing Groups. You can make a routing group just for your home specific stuff. Routing groups are defined by making a directory with parentheses around it. So you can make a directory called (home) and move page.js in there and then you can make another layout.js in that directory also. like so:

    /app
  layout.js
  /(home)
    page.js
    layout.js
  /about
    page.js
    layout.js
    ...ect

    So Nextjs will first check the root of the app directory and load the layout.js found there. Then it will travel to the (home) directory as a child of the root to load your page and layout for the home page.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search