ProNextJS
    Professional Next.js Course
    Loading price
    30-Day Money-Back Guarantee
    lesson

    Organizing Components into Directories

    Jack HerringtonJack Herrington
    Code

    In some projects, you might see components organized into their own directories. This means each component has a folder with all its related files. While this might seem like overkill at first, there are good reasons to think about structuring your components this way. Let's explore why this can be helpful.

    Looking at a Sample Application

    Consider the example application and Storybook setup shown below:

    the example application

    On the right side of our development environment, we have the app using the Button component. On the left side, we have Storybook, which shows the button by itself for development and testing.

    In Storybook, we have three main sections for the Button component, some tests, and the Stories for the button. Let's look at how that that maps to the project's file structure.

    Understanding the File Structure

    Inside of the project directory is a __tests__ directory, which contians a file Button.test.tsx. We can run these tests with pnpm test in the terminal.

    To run Storybook and see the button by itself, we use pnpm storybook. The button stories are in the src/stories directory. Here, we find two files: Button.stories.mdx and Button.stories.ts.

    Then inside of the app directory, the button component has two more files: Button.tsx for the component code and Button.module.css for the styles.

    In total, our simple Button component involves five different files: the component code, its CSS styles, the Storybook stories, the documentation, and the tests.

    This can get messy, especially when changing the button, since we need to find and update files in different places.

    Putting Components into Directories

    To fix this, we can make a new directory called Button at the top level app directory in our project. We'll then move all five button files into this new directory. This way, everything about the Button component is in one place:

    // inside `src/app/Button`
Button.test.tsx
Button.stories.mdx
Button.stories.ts
Button.tsx
Button.module.css

    Challenge

    Your challenge now is to make sure that the import when using the Button component remains ./Button, even after moving the files into the Button directory.

    Try to solve this on your own, then check out the next lesson to see how I did it.

    Transcript

    Some products choose to put components inside of their own directories. So you've got a directory per each component in the application. And sometimes that can seem like a bit of overkill, but let me show you why you might want to consider that for your application. Let's go take a look at our sample application. On the right-hand side, we've got the actual application itself using a button component.

    Then on the left-hand side, there is the storybook for that button. There's three different things here. There's the button, there are tests for the button, which we haven't seen yet, and then there are the Storybook stories for the button. So let's go take a look at how that lays out in the code. So if I look over here at the project structure, we've got a test directory.

    That's where our button test is. Let's actually run that. So to run that, I can do pmpm test. To run Storybook, I run pmpm storybook. The stories are located in the source directory under stories.

    We've got a button mdx and a button stories. And then the actual button itself has another two files. It's got the button implementation, which is a simple React button, and then a button module CSS. So when it comes to button, there's actually five different files. There's the button itself, there is the CSS, there's the stories, there's the documentation, and then there's finally the test.

    So that's quite a bit for just a button. And that's a problem because when it comes to refactoring, you're going to want to move it around all as one piece. So how do you actually organize it all into one piece? Well what I'm going to have you do is create a new directory right at the top here called button. You're gonna bring all of those assets into button but and here is the really fun part you want to make sure that the import remains .slash button.

    So you need to figure out how to do that. I'll show you in the next video how I do it.