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?

score 0 · Answer 1 · answered Jun 19 '23 at 19:52

0

As in the example Mahesh gave, you cannot just create a components dir inside the app router, however you can create a (components) dir without making the comps create new routes! docs src so it'd be like this:

answered Jun 19 '23 at 19:52

8koi

182
1
1
10

1

In your case, wouldn't it be better to name it `_components`? `(components)` only groups them without adding the folder prefix to the route, whereas _components is a private folder (https://nextjs.org/docs/app/building-your-application/routing/colocation#private-folders). You could also add a folder ./components (outside of ./app). – Joris Kok Jul 02 '23 at 07:21
@JorisKok Yes you are right, actually it goes outside the app/ dir, that'd be the equivalent of making a components/ dir inside pages/ The recommended folder structure is to select yes to create a src/ dir and put components/ there (I found it in several tutorials and my boss told me) – 8koi Jul 05 '23 at 22:45

score 0 · Answer 2 · answered Aug 20 '23 at 22:32

0

I found and also recommend to you this awesome folder structure to use in Next.js 13.4 or newer version with new App router, hope you like it!

folder structure for next.js 13.4

answered Aug 20 '23 at 22:32

Philipe Almeida

11
3

score -1 · Answer 3 · answered Jan 18 '23 at 16:13

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!

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

3 Answers3