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?

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?

• javascript
• next.js

• just put it in app dir, what issue are u facing? page.tsx in /app will be / in your url – Someone Special Commented May 2, 2023 at 14:52
• 1 @SomeoneSpecial just like the question states. I want to make a folder that is specific to the home page. What do you mean just put it in the app dir. Put what in the app dir. I want to have a layout for the entire app and then a layout specific to the home page or / route. – user3331344 Commented May 2, 2023 at 14:54
• you are looking at routing group beta.nextjs.org/docs/routing/defining-routes#route-groups . use layout.tsx in /app directory for your homepage, then create a routing group for everything else – Someone Special Commented May 2, 2023 at 14:54
• @SomeoneSpecial I want to make a route folder specific to the home page. and that does not share the layout, error, loading, ...ect with the rest of the app. Just like the question states. Right now everything for the / route is placed at the root of the app directory. But I want to specify layout for the entire app and then have a unique child layout for the home page. You can do this for every other page except for the home page. – user3331344 Commented May 2, 2023 at 14:58

2 Answers 2

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.

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.