@Scarlet Tanager i think you need to add the exntension

If same file

Especially if using typescript

what should I do

You have to add the extension

Which extension my friend

What is the exact Error message?

I don't think that is causing an error. You are trying to export Header, Form and Footer component, out of a folder.

I assume each of them is defined inside of their file. Following that, even they are placed inside of the same folder, they are defined in different files. You need to import them separately.

Might look like this:

import Header from '@/components/registrationStart/Header'
import Form from '@/components/registrationStart/Form'
import Footer from '@/components/registrationStart/Footer'

I'm exporting them into index.ts and calling outside

Oh, I see, have You tried adding /index at the end of import line?

import { Header, Form, Footer } from '@/components/registrationStart/index'

This issue arises because Next.js, in this case, prioritize files over directories when resolving module paths.

Yes I tried with this one and its working, its this a good way to go?

because I changed folder name and everything worked but I want that name of folder not other

I'm trying new folder sturcture what would you suggest?

I would say that the most simple solution and the best practise would be to rename either the file or the folder. Following that, in case You are working in team, it is less likely for someone else to encounter the same Error.

However, I don't see a problem in adding that /index at the end of the import line which clarifies that registrationStart really is a folder, as long as it works for You. But, following that approach, that does not prevent the same confusion and potential errors in the future.

should I go with this folder structure?

I would personally rename one of them. But, in case You want to create multiple components with their own sub-components, I might want to wrap those sub-components folders inside of new folder and call it, for example, subcomponents.

In general, Next.js is unopinionated about how You organize and colocate your project files. It's about going with what suits You, and Your team, the best.

Here You can find some of the Project Organization Strategies mentioned inside of the docs:
https://nextjs.org/docs/app/building-your-application/routing/colocation#project-organization-strategies

what you use the most?

how would you treat this folder stucture that i have

I personally store all of my custom components inside of the components folder at the root of the app directory. Apart from that, at the same level, there is a folder called ui where all the shadcn custom components are stored.

I have never encountered that problem where I have components that depend on multiple sub-components in which case I have to question the way I organise them for future development.

But the way You did in the example, You provided above, it should be completely fine as long as You know what You are doing and it suits You and Your team.

As I said above, in case You want to create multiple components with their own sub-components, I might want to wrap those sub-components folders inside of new folder and call it, for example, subcomponents. Otherwise, I would just rename of them.

Can you send some screenshot of your project structure would be great

If it helps one of my project structres is like this:


/app
/lib
/services
/helpers
/models
/utils
/helpers
/common
/others
/typings
/sections
/home
/about
/contentManagement
/components
/common
/framer
/layouts
/others
/svgs
/ui
/hooks
/framer
/others
/enums