Best way to connect Nextjs frontend to an external Backend
Unanswered
Australian Freshwater Crocodile posted this in #help-forum
Australian Freshwater CrocodileOP
Hey,
I wanted to know which way is the best for integrating an external backend with a nextjs frontend, Its always a challange for me and I do it differently every time, the point is : Where to fetch data like content (layout?, component?), When to cache those data and when to fetch? And should I use Next-auth for authentication?
I mean I can do it but not in a formal and correct way and that's why I'm making this post here.
Any tips will be appreciated!
I wanted to know which way is the best for integrating an external backend with a nextjs frontend, Its always a challange for me and I do it differently every time, the point is : Where to fetch data like content (layout?, component?), When to cache those data and when to fetch? And should I use Next-auth for authentication?
I mean I can do it but not in a formal and correct way and that's why I'm making this post here.
Any tips will be appreciated!
8 Replies
@Australian Freshwater Crocodile Hey,
I wanted to know which way is the best for integrating an external backend with a nextjs frontend, Its always a challange for me and I do it differently every time, the point is : Where to fetch data like content (layout?, component?), When to cache those data and when to fetch? And should I use Next-auth for authentication?
I mean I can do it but not in a formal and correct way and that's why I'm making this post here.
Any tips will be appreciated!
Chum salmon
I think you are not comfortable dealing with api yet.
I highly recommend to strengthen your foundation first.
try fetch data from fake api like https://github.com/Ovi/DummyJSON and display it on a test page for fun.
You can ask gpt for help if you don't know how to fetch from api but this is very basic and according to your question, I don't think you have it yet.
I highly recommend to strengthen your foundation first.
try fetch data from fake api like https://github.com/Ovi/DummyJSON and display it on a test page for fun.
You can ask gpt for help if you don't know how to fetch from api but this is very basic and according to your question, I don't think you have it yet.
@Anay-208 | Ping in replies You can use the backend in nextjs itself.
I recommend you to go through https://nextjs.org/learn
Australian Freshwater CrocodileOP
I mostly use nextjs backend itself and its really easy for me, but in the case if I use an external backend I asked this question
@Chum salmon I think you are not comfortable dealing with api yet.
I highly recommend to strengthen your foundation first.
try fetch data from fake api like https://github.com/Ovi/DummyJSON and display it on a test page for fun.
You can ask gpt for help if you don't know how to fetch from api but this is very basic and according to your question, I don't think you have it yet.
Australian Freshwater CrocodileOP
I've worked with API's and I know how but as you said I'm not really comfortable using them
I agree this
I'll try it
@Australian Freshwater Crocodile I've worked with API's and I know how but as you said I'm not really comfortable using them
Chum salmon
These are the areas you should look into one by one.
1.) Fetch the data directly to where you want to display it.
- This is the most basic fetching method. You fetch to the page you want to display.
- Try to be comfortable with fetching in both SSR and CSR methods.
- After that try to pass down the data as props to child components to spice it up a bit. For example, display fetched data in a card component.
2.) Global state
- You do this when you wanna have access to something at all time. For example, cart items on the header/navbar. You use useContext or other state management libraries for this.
- This is when you start learning createContext, useContext and Provider.
- After that you can try out some libraries, I recommend Zustand
3.) Authentication
I don't wanna call it fetching but since you included it in your question I'll explain a little bit. I don't use Next Auth so I'm not sure exactly how it works but they all should have similar flow.
- You connect to the server via its client.
- Using their auth functions to do the following: sign in, sign up, log out, and social sign in (eg. OAuth).
- Authentication is all about getting the session (tokens). If you have it, you're authenticated. If you don't, you're not authenticated.
That's pretty much the idea. It's not perfect, it's just what I have on top of my head
1.) Fetch the data directly to where you want to display it.
- This is the most basic fetching method. You fetch to the page you want to display.
- Try to be comfortable with fetching in both SSR and CSR methods.
- After that try to pass down the data as props to child components to spice it up a bit. For example, display fetched data in a card component.
2.) Global state
- You do this when you wanna have access to something at all time. For example, cart items on the header/navbar. You use useContext or other state management libraries for this.
- This is when you start learning createContext, useContext and Provider.
- After that you can try out some libraries, I recommend Zustand
3.) Authentication
I don't wanna call it fetching but since you included it in your question I'll explain a little bit. I don't use Next Auth so I'm not sure exactly how it works but they all should have similar flow.
- You connect to the server via its client.
- Using their auth functions to do the following: sign in, sign up, log out, and social sign in (eg. OAuth).
- Authentication is all about getting the session (tokens). If you have it, you're authenticated. If you don't, you're not authenticated.
That's pretty much the idea. It's not perfect, it's just what I have on top of my head
Northeast Congo Lion
Well Next.js might have its own backend but compared to other backends like Laravel, Django, NestJS, or even Express.js, I would say it's kinda lacking. You can use Auth.js (formerly Next-auth) to manage authentication and authorization on the frontend via sessions. Global state can be managed using Zustand. For caching, I usually do it when retrieving lists of data and sometimes even item details but invalidate the cache when I do a relevant create, update, or delete operation.