Where do custom components go in Next.js 13 file structure?

Question

With this version, are you meant to create a Components/ folder inside the app folder? Or can I add new components anywhere in the file structure?

I currently have a components/ folder nested inside the app/ which seems to work fine. But I'm not sure if this can cause issues or if there is a better approach.

Can each "page" get it's own components/ folder?

Answer 1

In NextJS anything you keep inside the pages folder is considered a page or subpage, lets's say you have created the components folder inside one of the pages folders like below. Then you can access the components inside this folder as pages, so you can access this component with the below URL.

https://baseUrl/admin/components/componentName

So in NextJs, everything we put inside the pages folder is considered an individual page. If you want a separate space/folder for components you can create feature-level components outside the page folder like below.

Now components added in this feature folder are not accessible as a page and you can reuse these components as you want.

I hope this answered your question. Happy coding!