NextJs 13 app folder - SPA
I want to migrate 3yrs old React-Express app. Im considering migrating to Nextjs App folder. What is the current state with making SPA with the NextJS 13 app folder. Is it viable? I really dont care about RSC for now but it might be useful once it matures so I want to go full SPA at this time anyway.
This is an admin dashboard app with OAuth wall so no need for any SEO and you can only interact with the app once logged in. It must be dockerized and no plans to host on vercel. Also it currently uses passport and trpc so I expect I would need to use express server with nextjs to keep the passport oauth flow to be compatible with what its for now (I would need to keep both apps simultaneously and serve nextjs app page by page with swap to the old app until its fully migrated to the nextjs)
Are there any problems with App dir and SPA approach? Is there anything to keep in mind when using app dir? Do I need to mark every component with 'use client'? Appreciate any help 😉
P.S. Any link to github repo with example SPA App folder would be awesome ❤️
3 Replies
I don't think this is a great idea to make an SPA app using
app directory api. Since you'd have to put "use client" at the beginning of each file. Which is tedious. In my opinon better approach would be to just use the pages api instead.
To elaborate everything in app directory is SSR (server side rendered) by default, if you want to make component/page reactive you need to put "use client" at the beginning of the file. This allows you to use hooks in the component.
Other approach would be to just make some of the app server rendered and the rest rendered on the client. Which, in my opinion, is the best approach.
If you choose to use pages api the best way to migrate it would be create-t3-app, but something tells me you already know that.
DISCLAIMER: I did not use app directory a lot and I could be entirely wrong. You should investigate on your by reading the docs.
https://nextjs.org/docsDocs
Welcome to the Next.js Documentation.
What router are you coming from? If you’re currently using React Router with some nested layouts, your options are basically App Dir, Remix, or just keep it a normal SPA, maybe upgrade your bundling to vite.
Yes thats correct. React router v3.2.0🙅♂️.
Remix is not an option.
Im torn between switching to vite build or next app dir. But I'm not sure because I'm reading a lot of bad stuff on app dir right now. I want simple setup/configuration and a low entry point so i can focus on rewriting page by page for the new app asap with the possibility of future-proofing and ease of maintenance.