NextJS using Django API - how to choose the best pattern

Question

I'm running GeoDjango on a Digital Ocean Droplet and I'm rewriting the project from VueJs to NextJs hosted on Vercel.

In Vue, we have a storage-related service model that is responsible for getting and updating data.

I found the fetch part to be pretty good, but I'm still trying to figure out the best way to update the data.

How should I build a CRUD layer without using the NextJs API folder (I don't want another backend calling my Django backend).

Should I use context?

Should I use middleware?

Should I create a custom service? So what to call them? Is there an equivalent to store in NextJs?

I'm asking because I want to avoid confusion because now I'm using fetch POST on the page. I'm using NextAuth which provides me context with jwt token.

Thanks for any tips

Answer 1

For Next.js, you can use override to proxy requests to your backend. This allows you to access existing backends from relative URLs as if they were in API routes. You can do this explicitly for each route, or you can use the incremental adoption pattern, which will check for existing routes in your Next.js application before proxiing the request back to the Django server.

// next.config.js
module.exports = {
  async rewrites() {
    return {
      fallback: [
        {
          source: '/api/:path*',
          destination: `https://your.django.app/api/:path*`,
        },
      ],
    }
  },
}