❔ Web stack and connecting C# backend w/ Next.js frontend
Hey! Recently been learning frontend with React and Next.js, so far so good, however, for my project which is somewhat complex, I think I need a separate backend than the options that Next.js itself provides. Backend REST API and realtime SignalR handles data streamline for the applicaiton. Sounds good on paper, however I'm not entirely sure that it is that simple and more than that I lack understanding how the entire thing will be working, connecting and hosting.
For me as for someone new into that web tech, it looks like this:
I have separate REST API C# project (including SignalR endpoints ig, I don't see point of moving SignalR few endpoints into separate project, however it might be just me), which is being ran in container alongside with other container, running my Next.js frontend, and frontend just uses HTTP requests for API when they are required. This should not trigger CORS as far as I understand, since both things will be ran on the same server, behind the same webserver and URL. But here's the thing, REST API for sure must have an authorization and authentication on barely every endpoint it exposes. And I don't seem to get how do I do authorization in the way that we can then store it and use on frontend app. Is it that simple as calling authorization endpoints at REST API from serverside rendered (or even client side rendered) components and then calling some cookie/idb methods on the Next.js side to mount that data into users browser?
Problem is that I can not imagine the whole image in my head and mentally connect things, decide what techs and interactions I have to learn.
The things I don't fully understand:
- Does Next.js comes with somewhat builtin webserver for production or do I need ngingx to proxy requests? It seems like I do, because I have to route requests between REST App, and frontend App (or am I overlooking something)?
- Already mentioned authorization problem.
I will be really grateful for help.
8 Replies
So to say, I really lack clarity on how organize interaction of things
I think Next comes with a very rudimentary server and it should be placed behind a reverse proxy like Nginx or Caddy
Far as auth goes, you'd probably use the standard OAuth2
Yeah, I also thought that Next has a dev server, and reverse proxy is the way. OAuth suggestion is interesting and honestly I haven't thought of it, becuase in my head OAuth is usually being used to provide the third side with access, whereas both of frontend and backend (and so their interaction) for me were like "our-party". But now that might seem as really interresting apporach. I will dig that, thanks!
Or you could just go for a plain JWT auth, without the whole OAuth2 flow
I will dig both options anyway, just for selfawareness at least. And with JWT flow will be somewhat like that, as far as I can imagine (correct me if I'm wrong):
1. User requests the page from frontend
2. User tries to authorize, frontend requests REST API, providing it with user data
3. If success, JWT is returned, and then frontend (both server-side next and front-side react) can use methods they have to initialize a cookie, to handle state
4. Viola
It seems correct for me, but I tend to question my understanding of new things, so yeah, might sound as a dumb questions. Thanks for your answers.
Something thereabouts, yes
use a folder structure like:
- appname
- /client
- .git
- --- next app
- /server
- .git
- --- dotnet rest api
then after writing both, deploy each as seperate, like frontend -> vercel, backend -> digitalocean, azure ...
for your auth question: you can use dotnet auth for backend and no auth for frontend. i also dont recommend jwt method which not much secure. so you can look at AuthN,Z or Microsoft Identity things (complex)
Was this issue resolved? If so, run
/close - otherwise I will mark this as stale and this post will be archived until there is new activity.