I'm approaching SaaS programming using next.js and I have to say that having only programmed in C and C++ it all seems very confusing to me. I wanted to ask you: Isn't there a ''step'' solution, such as starting from the front end first, completing it, then moving on to the actual script of your SaaS? A bit like the ''forced'' steps in writesonic or jasper when you try to make them write a blog article. I was wondering if there was something similar for the SaaS/next.js world With a first part of drag and drop of the front end components, then drag and drop of the backend, to then complete with the script of the actual program that will run for the user.
I can imagine it is confusing coming from C and C++ background. With Next.js you can start e.g. by building the UI components and then use route handlers or server components to do the backend work e.g. accessing a database. If you use route handlers then you need to add business logic to your frontend component, that makes requests to the route handler. If we think about a simple todo app, you can start by building the UI for the todo app. Once you have all the fields in the UI, you can create a route handler (= api endpoint) where you can handle CRUD operations for the todos.
Hey, I was wondering how do you securely use token or api keys with a next.js app router where the server side and the client side are mixed together. You just said that it is a benefits but it Is just more confusing to hide keys for me xD
You do it the same as another framework. Just don't expose secrety keys in the html / js sent to client. Also side not, use client doesn't mean its a client page, it's still server rendered, it just means the javasscript hydrates on the client.
Good question! It can be confusing tbh, but as a rule of thumb if you make e.g. fetch request, that uses api keys, from a server component, the fetch request will be run on the server so the api keys won't be sent to client at all. The resulting html will be sent to the client (browser) instead of the fetching logic. If you use client component the fetching logic is sent to the client (browser) -> the api keys will also be sent because the browser needs to successfully make the fetch request and it needs the api keys for that. Hope that clarifies things!
Notable points! Thanks for pointing & sharing it out for devs. and Thank you Tuomo!
Great to hear thanks!
Thank you for the insights! 🔥🔥🔥
It would be really cool if you can show us the cache optimization and best practices with server actions!
Thanks for the suggestions, always happy to hear what topics would be interesting! 🔥
Still not sure if I should use trpc instead of server actions and try to do most things on rsc. I would want to do forms etc on client
Thank you for your clarifying explanation.
You are welcome, glad you liked it!
I'm approaching SaaS programming using next.js and I have to say that having only programmed in C and C++ it all seems very confusing to me.
I wanted to ask you:
Isn't there a ''step'' solution, such as starting from the front end first, completing it, then moving on to the actual script of your SaaS?
A bit like the ''forced'' steps in writesonic or jasper when you try to make them write a blog article. I was wondering if there was something similar for the SaaS/next.js world
With a first part of drag and drop of the front end components, then drag and drop of the backend, to then complete with the script of the actual program that will run for the user.
I can imagine it is confusing coming from C and C++ background. With Next.js you can start e.g. by building the UI components and then use route handlers or server components to do the backend work e.g. accessing a database. If you use route handlers then you need to add business logic to your frontend component, that makes requests to the route handler.
If we think about a simple todo app, you can start by building the UI for the todo app. Once you have all the fields in the UI, you can create a route handler (= api endpoint) where you can handle CRUD operations for the todos.
Hey, I was wondering how do you securely use token or api keys with a next.js app router where the server side and the client side are mixed together. You just said that it is a benefits but it Is just more confusing to hide keys for me xD
You do it the same as another framework. Just don't expose secrety keys in the html / js sent to client. Also side not, use client doesn't mean its a client page, it's still server rendered, it just means the javasscript hydrates on the client.
Good question! It can be confusing tbh, but as a rule of thumb if you make e.g. fetch request, that uses api keys, from a server component, the fetch request will be run on the server so the api keys won't be sent to client at all. The resulting html will be sent to the client (browser) instead of the fetching logic.
If you use client component the fetching logic is sent to the client (browser) -> the api keys will also be sent because the browser needs to successfully make the fetch request and it needs the api keys for that.
Hope that clarifies things!