All Articles

Where Should I Put My Components In The App Router?

Jack Herrington
Jack Herrington
August 6th, 2023

Q: Where should I put my components in the App Router?

A: It is a good idea to keep your component files small, and that means having a lot of component files around, which can certainly cause a bunch of headaches around file management. There are a bunch of different options:

  • Directly within the route directory - For small projects putting the components used in the page.tsx file in the same directory as the page.tsx file itself would be a reasonable option. The app router ignores files other than page.*, route.*, loader.*, error.*, etc. So putting them in the same directory isn't hurting anything.
  • Inside a "components" directory - In the example projects provided by Vercel they use app/components directory to hold the component files.
  • Inside a hidden directory - You can also create a sub-directory prefixed with and underscore, for example _components. The App Router will ignore this directory for routing purposes.
  • Inside a "route group" directory - Another option is to specify a route group directory like (components). Route groups are a way to organize sets of routes that are actually located on route above the directory. For example app/(marketing)/about/page.tsx would serve off of /about. I used to use this (components) technique but I've moved to using _components instead because I think (components) is a misuse of the route groups functionality.
  • In another directory altogether - If your app directory is at the top level of the project then you can make a peer directory called src and within that components and you can locate your components there. If you chose to put app within a src directory when you created the application you could put your components in src/components as well.

I tend to use a combination of techniques. I put truly global components, like "design system components" in src/components. Then when I have per-route components I put them in a _components directory within the same route directory. I may even have multiple component directories with names like _cartComponents and _headerCompenents.

There are a lot of ways to organize your components and I don't think the community has yet arrived on a "best practice". But that being said, if you tend to organize your components like this:

+ MyComponent
|--- index.tsx
|--- styles.module.css
|--- tests.ts

Which is a common practice on larger projcets then I would strongly recommend either going with src/components or app/_components because you are going to have a lot of directories.

Personally I hate this pattern because you have a ton of files with the same name only distinguished by directory. But now we have page.tsx and route.tsx so I guess I'll have to get used to figuring out a good workflow to find the page.tsx or route.tsx that I'm looking for easily.

Share this article with your friends

Subscribe for Free Tips, Tutorials, and Special Discounts

We're in this together!

We respect your privacy. Unsubscribe at any time.

Jack Herrington

Written by Jack Herrington

Jack Herrington is a Full Stack Principal Engineer who orchestrated the rollout of React/NextJS at Walmart Labs and Nike. He is also the "Blue Collar Coder" on YouTube where he posts weekly videos on advanced use of React and NextJS as well as other frontend technologies trends. His YouTube channel hosts an entire free courses on React and TypeScript. He has written seven books including most recently No-BS TypeScript which is a companion book to the YouTube course.