[FileNaming] Has the file naming convention in NextJS changed to use all lowercase?
Answered
West African Crocodile posted this in #help-forum
West African CrocodileOP
So while browsing the Layout section in the Nextjs
It's all written in lowercase and use .js format instead of .jsx. 😲
Is the naming convention is now all lowercase? Just like in nuxt? 🧐
Thank you !!
docs, https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern they put a file name on each top of code example. And for layout they name the file as// components/layout.jsIt's all written in lowercase and use .js format instead of .jsx. 😲
Is the naming convention is now all lowercase? Just like in nuxt? 🧐
Thank you !!
Answered by joulev
oh that one isn't enforced by nextjs. you can use components/ThemeSwitch.tsx or components/theme-switch.tsx, it's your choice.
but i would say more and more people have been switching to kebab-case instead of PascalCase or camelCase to avoid problems relating to OS case sensitivity. see for example: https://nextjs-faq.com/module-not-found-due-to-case-sensitivity
but i would say more and more people have been switching to kebab-case instead of PascalCase or camelCase to avoid problems relating to OS case sensitivity. see for example: https://nextjs-faq.com/module-not-found-due-to-case-sensitivity
9 Replies
@West African Crocodile So while browsing the Layout section in the Nextjs `docs`, https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern they put a file name on each top of code example. And for layout they name the file as
`// components/layout.js`
It's all written in lowercase and use .js format instead of .jsx. 😲
Is the naming convention is now all lowercase? Just like in nuxt? 🧐
Thank you !!
the naming convention has never involved uppercase. in the pages router, it was pages/index.js, pages/_app.js. here it is app/layout.js, app/page.js.
.js, .jsx, .tsx all work. .js and .jsx in particular shouldn't be any different.
.js, .jsx, .tsx all work. .js and .jsx in particular shouldn't be any different.
West African CrocodileOP
Thank you for answering @joulev . I'm asking because on the page I mentioned above, the route for the layout is inside a
/component directory. Additionally, I just ran a basic installation for NextUI and noticed that all the component names aren't capitalized. That blew my mind, to be honest. 😅@West African Crocodile Thank you for answering <@484037068239142956> . I'm asking because on the page I mentioned above, the route for the layout is inside a `/component` directory. Additionally, I just ran a basic installation for `NextUI` and noticed that all the component names aren't capitalized. That blew my mind, to be honest. 😅
oh that one isn't enforced by nextjs. you can use components/ThemeSwitch.tsx or components/theme-switch.tsx, it's your choice.
but i would say more and more people have been switching to kebab-case instead of PascalCase or camelCase to avoid problems relating to OS case sensitivity. see for example: https://nextjs-faq.com/module-not-found-due-to-case-sensitivity
but i would say more and more people have been switching to kebab-case instead of PascalCase or camelCase to avoid problems relating to OS case sensitivity. see for example: https://nextjs-faq.com/module-not-found-due-to-case-sensitivity
Answer
(by the way, in case you didn't know, react doesn't enforce anything about file names. naming your component files in PascalCase is just a habit introduced by various react courses and tutorials. you are completely free to name the files in any way you want.)
West African CrocodileOP
Wow, I didn't know that. Thank you again, that's very useful. I appreciate it
West African CrocodileOP
if you have some minutes (just to make sure that we're on the same page) take a look at this article please and probably this article is related only for components name not for
files-components-name.tsx is that correct? https://ihsavru.medium.com/why-react-component-names-must-begin-with-a-capital-letter-d4b5e5985209@West African Crocodile if you have some minutes (just to make sure that we're on the same page) take a look at this article please and probably this article is related only for components name not for `files-components-name.tsx` is that correct? https://ihsavru.medium.com/why-react-component-names-must-begin-with-a-capital-letter-d4b5e5985209
yup. only component names, not file names
hello-world.js and HelloWorld.js are both fineonly
<HelloWorld /> is fine, <helloWorld /> is not fineWest African CrocodileOP
pretty clear!