You can do anything that you want in next.js, and pay attention 'each answer that you recieve is a personal advice from another developers and it can be completely optional'.

for me:

• Whenever I want to seperate my codes for creating a re-usable component, I'm creating a UI directory for my buttons, inputs, and everything related to our design system. After that I'll managing the required props for them, and extra options that I need to handle in another place for using the component.

• In my opinion, you don't need create a custom component for each element that you have in your design. If it is a common element, create a component. If it isn't, just use it everywhere that you need and create everything so simple.

• I love tailwind. It is a nice tool for creating UI. But now I don't use it directly. Because you need to put it classes everywhere! I prefer using a powerful UI framework. for example in my opinion, Chakra UI is a fully customizable, powerful, and simple tool that I can works on it. It is so simple, and makes my project small. You don't need to put tailwind classes in your component, you just call the component that you need, config it in the configuration and boom! that's done. You can change anything that you want in Chakra's components.

• And in my opinion, if you are repeating anything in a react project, it can be handle in a better way. Just find the best option that you have. If you need create custom component, do it. If you need handle something in just a place, do not! If you have a function that you need it in several places, create a custom hook for it. and so on...