Question 161601 in Reactjs Question posted in
The new location for the React Documentation can be found here.

What is the best practice for Reactjs & NextJS 13 folder structure?

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 !

Tags:

2

Answers


  1. 0

    enter image description here

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

    enter image description here

    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.

    Login or Signup to reply.
  2. 0

    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.

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

Back To Top
Search