NextJS 13 folder structure best practice

Question

I'm learning to use NextJS and I'm using the latest version with App Router, I'm currently stuck on how to do routing, such as where to put the register and login pages, and its' folder structure in general, where I put components and how to group other related components together, can you shed light on this topic, and please make it as simple as possible and maybe give some examples because I'm still learning, any help would be much appreciated, thankyou !

Answer 1

I think reading this section in Next docs help you organize the project folders:

https://nextjs.org/docs/app/building-your-application/routing/colocation

I tried with many different structures and I finally chose this one:

1. Everything (all folders and files) will be in the /app directory because the /app directory accepts colocation and it's different from /pages directory which was only for routing purposes. In this way /app directory can be assumed the new /src directory.

2. All the non-routes folders will be Private Folders by prefixing their name with an underscore (as stated in the link above). This tells the Next router that this folder is not part of the routes. (e.g. _components, _libs, ...)

3. To this point we established that every folder with underscore (_) is not route and other folders without it are a part of the routing system (although having a page.tsx or page.js file in the folder is another condition for being a part of the routing system), but I used another Next 13 feature and it is Route Groups (as stated in the link above). It is wrapping a folder name in parenthesis, so that it shows the folder is for organizational purposes (grouping folders) and should not be included in the route's URL path ,e.g. (routes).

With these principles, I have all my required folders in /app directory, and with Route Groups all my routes are grouped in a "(routes)" folder, and with Private Folders by prefixing non-route folders with underscore, everything is isolated.

The image below is the summary of all the points above.

Hope the link and my way of organizing project folders help you.

Answer 2

Some keep the components inside the app but I keep them outside to tell other engineers that app directory includes only page components. If you have similar routes that have shared layouts you can use () syntax inside app directory. For example

Inside auth folder you can have login and signup pages with the shared layout.

Inside the components folder, you can create sub-folders for providers, ui, or shared components.

Answer 3

In version 13, Next.js introduced a new App Router built on React Server Components. Means whatever component you will place under the app directory will by default work as a server component. I will suggest to place components inside the /app directory if you wanna render the components on server side. You can also place the components inside the folders of any page.

/app
  /components
  /dashboard
    customComponent.tsx
    page.tsx
  layout.tsx
  page.tsx

For getting more of the File Conventions read this article: https://nextjs.org/docs/app/building-your-application/routing

Answer 4

you can use various routing in latest App router version and even customise the routing to use your own customised routing.

Default Routing with Next.js App Router: for creating a page,you can directly create a folder with page name inside the folder for example about page,create about folder, create page.jsx(inside about folder,act as the index page for about i.e. can be accessed by URL/about) App /about page.jsx

2.) To implement custom routing

you can add in next-config

async rewrites() {
    return [
      {
        source: '/old-route',
        destination: '/new-route',
      },
      // Add more custom routes as needed
    ];

I have researched over the directory structure too when i started For Best Practices ,i directly create the pages inside the App directory.like all/products/page.jsx or app/about/page.jsx

for admin ui , i use app/admin/pagenameofadmin/page.jsx app/admin/page.tsx(admin home page)

for all other components use components folder,and create subfolders in components to find components easily

layout - for common and repetitive components like header/footer/sidebar auth - for login signup related components admin - for admin ui components pagename - for page specific component

can also create for folder for specific content type if you want to keep everything organised at next level, i recommend to use it for complex projects only product - for products realted components

keep apis inside app/utils folder.

Answer 5

A simple folder structure example that you can follow:

1. Create a pages directory in the root of your Next.js project. This is where you'll place your page components that correspond to different routes.

2. Create an auth directory to group all authentication-related pages together inside the pages directory. For example:

    pages/
      auth/
        login.js
        register.js
   

3. In the login.js and register.js files, you can create your login and register page components. For example:

    // pages/auth/login.js
    const LoginPage = () => {
        return <div>Login page</div>;
    };
   
    export default LoginPage;
   

4. Next Create a page register.js:

    // pages/auth/register.js
    const RegisterPage = () => {
        return <div>Register page</div>;
    };
   
    export default RegisterPage;
   

5. To set up routing, you can use Next.js' built-in App component and Router from the next/router module. Here's an example of how you can configure your routes:

        // pages/_app.js
    import { useRouter } from 'next/router';
   
    const MyApp = ({ Component, pageProps }) => {
        const router = useRouter();
   
        // Check if the current route is an authentication route
        const isAuthRoute = router.pathname.startsWith('/auth');
   
        // You can perform any common layout or logic for all pages here
   
        // Wrap authentication pages with a layout or authentication-specific logic
        if (isAuthRoute) {
            // Add authentication layout or logic here if needed
   
            // For example, you can add a common navigation component
            // or apply styles specific to authentication pages
   
            return <Component {...pageProps} />;
        }
   
        // For non-authentication pages, you can apply a different layout or logic
        // or simply return the component as it is
        return <Component {...pageProps} />;
    };
   
    export default MyApp;
   

In the above example, we use the _app.js file to configure the layout or logic for different pages based on the route. We check if the current route is an authentication route (in this case, starting with /auth), and based on that, we can apply a specific layout or logic.

Note: You can further customize the layout and logic in the MyApp component based on your specific requirements.

With this setup, you can access your login page at /auth/login and the register page at /auth/register.

Remember to run npm run dev or yarn dev to start the Next.js development server and navigate to the appropriate routes to see the pages in action.

This is a basic example to help you get started with the folder structure and routing in Next.js. You can modify and expand it based on your project's needs.