[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live) [Discussions](/c/community/4) # Code review for first Next.js project 156 views · 2 likes · 4 posts Warren Cheetham (@headlesshost) · 2024-09-01 · ♥ 2 I have just completed my first Next.js project and would love some feedback particularly around folder structure and naming conventions. I have a long term goal of creating a demo/template so I want to make sure that it is best or at least good practice. Thanks in advance. Repo [https://github.com/Headlesshost/react.nextjs.knowledgebase](https://github.com/Headlesshost/react.nextjs.knowledgebase) Open [https://react-nextjs-knowledgebase.vercel.app/knowledgebase/gs_intro](https://react-nextjs-knowledgebase.vercel.app/knowledgebase/gs_intro) for a live demo of the app. Amy Egan (@amyegan) · 2024-09-02 You're off to a good start, @headlesshost! I asked the Next.js folks for some tips, and this is what they shared: > * They shouldn't use both a `next.config.mjs` and `vercel.json` — they should stick with the `next.config.mjs` for their headers > * If they want make a demo/template, I would recommend they bump `next` to the latest (currently 14.2.7) > * I think this `redirect` https://github.com/Headlesshost/react.nextjs.knowledgebase/blob/master/app/page.tsx is causing some layout shift > * Don't see anything wrong with their folder structure or naming! I hope that helps :smile: When you're ready, you can use this submission form to share it for potential inclusion in the Vercel Templates Marketplace: https://vercel.com/templates/submit Warren Cheetham (@headlesshost) · 2024-09-02 Thanks @amyegan , that is really helpful feedback. The redirect issue is something I struggled with. :thinking: In Headlesshost “staging content sites” are transient and users can create multiple versions to suit their needs. These multiple versions of content are rendered by a single staging website (Next.js). The website knows what version of content to render as the version instance id is passed in the url. How the staging URL is configured in Headlesshost [https://react-nextjs-knowledgebase-git-fac832-warren-cheethams-projects.vercel.app/](https://react-nextjs-knowledgebase-git-fac832-warren-cheethams-projects.vercel.app/b08ca852-7166-475c-a3d5-157cdcd74209){instance} How it resolves with one of the instances https://react-nextjs-knowledgebase-git-fac832-warren-cheethams-projects.vercel.app/b08ca852-7166-475c-a3d5-157cdcd74209 So I’m putting the instance id in the route to hold state, which is not ideal. When rendering production content it just uses “knowledgebase” as a placeholder. I could use query strings but I would need to add them to every navigation link. The route links are relative so they just work. If you have any suggestions on better ways to handle this I would really appreciate the feedback. Warren Cheetham (@headlesshost) · 2024-09-05 I accidentally deleted my site when testing the deploy button. Below are the new links. I have bumped the next version and deleted the vercel.json: Staging content https://react-nextjs-knowledgebase.vercel.app/b08ca852-7166-475c-a3d5-157cdcd74209 Production content https://react-nextjs-knowledgebase.vercel.app/knowledgebase Repository https://github.com/Headlesshost/react.nextjs.knowledgebase