Next.js Discord

Discord Forum

using nextjs frontend only, what are the pros?

Answered
Polar bear posted this in #help-forum
Open in Discord
Polar bearOP
Hey, at my current workplace we are discussing whether we can use NextJS or not.

So, our main issues are these;

Our database is on Mssql and we will be using .net backend. We don't want to deal with Prisma, we already have our backend. So, this effectively removes nextjs SSR capabilities.

Our second issue was general state management, can we manage state with redux? since we are only using client side of nextjs, then are not we better off with react?

We keep discussing these issues of usinf axios interceptors, fetching data, storing data in a central place so any component can use it. I have been reading docs, creating demos to showcase nextjs. Honestly, if anyone can point me to docs for what i need i d appreciate;

How to store fetched data centrally?
Hoe to handle response and request with axios?
And if we need client side for all of these, maybe next is not for us
Answered by joulev
i have never used redux toolkit myself, but the idea is basically to fetch the data in server components, then pass that data as props to client components where the global client-side state context is initialised
View full answer

41 Replies

Polar bearOP
What if i want to store the fetched data in a central storage, so i can use it in another component, as far as i understand it is against next.js principle to do so right?
no, thats normal, nothing wrong with that. thats doable both in the server (the data cache) and the client (normal state mgment solutions)
Polar bearOP
So i can use Redux toolkit as usual and only access the store in client components. And i can handle the fetching in a server component, then dispatch the response to redux toolkit
Am i getting the idea correct?
i have never used redux toolkit myself, but the idea is basically to fetch the data in server components, then pass that data as props to client components where the global client-side state context is initialised
Answer
Polar bearOP
Hmm makes sense absolutely
This is a paradigm shift though coming from react
American Crow
Be mindful that you'd need to have a very state heavy application for this. The same paradigm can be achieved with react context of course
Polar bearOP
Our applications are really huge and filled with data, that is why i am very cautious and curious
better to start from some small apps to experiment first
@joulev i have never used redux toolkit myself, but the idea is basically to fetch the data in server components, then pass that data as props to client components where the global client-side state context is initialised
when you are used to it the idea will feel more natural. it's just that the data flows from the server to the client, that's all there is to it
Polar bearOP
Our normal react way is simple, async thunk to fetch data from endpoint than store that inside global state, redux, than we access that state from each component. But this feels very old way of doing it and as far as read, once i get a grip, i can do this better on next.js
@joulev better to start from some small apps to experiment first
Polar bearOP
That is what i am doing at work currently, but people are just not understanding me... i am showing them how easy it is to handle fetched data.
Old habits die hard maybe
But the more i spend time on next, the better and smarter it feels to work with. Thus, i qm trying to know more about it. Thanks for the input!
@Polar bear Our normal react way is simple, async thunk to fetch data from endpoint than store that inside global state, redux, than we access that state from each component. But this feels very old way of doing it and as far as read, once i get a grip, i can do this better on next.js
American Crow
You are basically preloading which is a valid pattern (if that is what is needed)
The other concept would be to fetch data where its needed:
You'd end up with multiple server component wrappers which fetch the data for the client component(s) below them and just "inject" what they need.
Thus, i need to use some sort of global state
i have one quick question as well. I have been told to use Axios with next js, but i think fetch api is quite capable. However, the interceptors from axios is a great tool. Is there an alternatives for next.js? To catch api response and request errors from a central place? i thought about middleware for this purpose
American Crow
Don't use axios.
You are right fetch is more capable. It's monkey patched (next14) so it will handle caching for you.
If you need convienece like interceptors use a thin wrapper like ky

Everything in detail here:
https://www.adios-axios.com/
Polar bearOP
i need to find a way to intercept res and res before they are handled though
Thanks for the link! i hope ky has thr capability
American Crow
they do, if this is what you mean
const api = ky.extend({
    hooks: {
        beforeRequest: [
            request => {
                request.headers.set('X-Requested-With', 'ky');
            }
        ]
    }
});
Polar bearOP
will dig into this more
This is another library thst i need to convince my chief
To use
American Crow
Difference is kyis a thin wrapper (hardly a libary) arround native fetch
axios is a full blown libary
so this would be a thinner than axios
Polar bearOP
Though Using axios with next.js has no issues right? At the end, i might need to use axios for its interceptor capabilities
American Crow
You can only really use axios on the client side in Nextjs 14 RSC thats the downside
Polar bearOP
i feel like, if we introduce axios, it basically is a react app with nice things that comes with next.ja
Not using fetch api feels inappropriate
American Crow
yea you basically not using a lot from nextjs anymore
Polar bearOP
Against the opinion of next.js, if it makes sense
i will dig through Ky furthermore. Thanks a lot both of you!
@Polar bear i will dig through Ky furthermore. Thanks a lot both of you!
American Crow
you welcome mark one of @joulev answers as solution, so others can benefit. (right click on a reply -> app -> mark answer)
Polar bearOP
Hey, just came back to share something. Ky is absolutely gorgeous. I managed to set up interceptors with Auth.js working flawlessly!
Polar bearOP
// kyClient.js
import ky from 'ky';

const api = ky.create({
  prefixUrl: 'https://api.example.com',
  hooks: {
    beforeRequest: [
      request => {
        // Add Authorization header to every request
        request.headers.set('Authorization', `Bearer ${localStorage.getItem('token')}`);
        console.log('Request:', request);
      }
    ],
    afterResponse: [
      async (request, options, response) => {
        console.log('Response:', response);
        if (response.status === 401) {
          // Handle 401 Unauthorized error
          window.location.href = '/login';
        } else if (!response.ok) {
          // Centralized error handling for other statuses
          console.error(`Error: ${response.status} - ${response.statusText}`);
          const error = new Error(response.statusText);
          error.response = response;
          throw error;
        }
      }
    ]
  }
});

export default api;


This is how i used ky as interceptors. Adjust accordingly, for example i am not actually using local storage to get the token
Just in case someone searches for something similar