Next.js Discord

Discord Forum

Where Do I place my custom components

Answered
WhyFencePost (Ping Reply) posted this in #help-forum
Open in Discord
WhyFencePost (Ping Reply)OP
I want to know where in the file structure to place my custom components. (I have a source directory). And also how do i import and export them?
Answered by B33fb0n3
configure your tsconfig.json (or jsconfig.json) with this argument in the compilerOptions:
    "paths": {
      "@/*": [
        "./*"
      ]
    }
View full answer

25 Replies

@WhyFencePost (Ping Reply) I want to know where in the file structure to place my custom components. (I have a source directory). And also how do i import and export them?
B33fb0n3
There is no way on what the correct way is. Structure it, how you like. I like this way:
Havhing the route with some actions, fetchings, the page, the layout itself, types if I need and validations, if I need.
You can also see the components that are in there.

You can import it like you see attached. And can also export it directly (see also attached)
Northern Inuit Dog
Nextjs.org/learn has a nice structure as well.
Brown bear
in app router mode,
The base components can be in root directory.
And needed data would be send by props
No need to fetch data on components for re-useful later.
Import works like this : import Button from "@/components/Button";
I attached my recent structure
Hope helpful for you
Northern Inuit Dog
This works. One other options is to colocate the components inside the app/(landing)/component.tsx if it’s only used in landing for instance. For shared this structure makes sense. Also Pagination.tsx (typo).
B33fb0n3
we don't know what he wants, because he don't talk with us 😦
Northern Inuit Dog
I would even do components/ui/Button and then components/Navbar which is more of a complex comp.
Oh my bad. I thought the person above me was sharing. ¯\_(ツ)_/¯
B33fb0n3
no, only the person who have OP next to his name is the thread creator
Northern Inuit Dog
Ah I was wondering what that stood for.
WhyFencePost (Ping Reply)OP
sry i was away, im dum, but what i think i will do is this
but i have a component in there now, but i cant get the path right
@WhyFencePost (Ping Reply) Click to see attachment
B33fb0n3
configure your tsconfig.json (or jsconfig.json) with this argument in the compilerOptions:
    "paths": {
      "@/*": [
        "./*"
      ]
    }
Answer
@WhyFencePost (Ping Reply) Click to see attachment
Turkish Van
Try @/components/....
WhyFencePost (Ping Reply)OP
give me a sec
@B33fb0n3 u done this: https://discord.com/channels/752553802359505017/1247222987254399118/1247240662399586415 ?
WhyFencePost (Ping Reply)OP
got it:
"paths": {
      "@/*": ["./src/*"],
      "&/*": ["/src/components/*"]
    }
it works now
@WhyFencePost (Ping Reply) sry i forgot, thanks
B33fb0n3
You can only mark one message as solution I guess. Would you mind marking the correct one as solution?
WhyFencePost (Ping Reply)OP
i did