Modern Web Architecture: Integrating Next.js App Router with .NET Backend Services

A frequent architectural question in modern full-stack development is how to effectively pair a high-performance frontend framework like Next.js with an enterprise-grade backend runtime like .NET.

In this article, we look at the boundaries, data flow, authentication handshakes, and caching strategies that make this architecture both productive for developers and exceptionally performant for end users.

The Separation of Concerns

Next.js (App Router) acts as the Frontend for Backend (BFF) and presentation layer. It manages server rendering, static asset caching, streaming HTML, and client-side interactivity.

ASP.NET Core acts as the Core Domain Engine. It owns business logic, transactional database operations, domain validation, background worker jobs, and high-throughput integrations.

Server-to-Server Data Fetching with Caching

One of the greatest benefits of the Next.js App Router is that Server Components execute strictly on the server. Your database credentials or backend service URLs never leak into client JavaScript bundles.

typescript

const BACKEND_URL = process.env.DOTNET_API_URL;

export async function getMedicalReports(patientId: string, token: string) {
  const res = await fetch(`${BACKEND_URL}/api/v1/patients/${patientId}/reports`, {
    headers: {
      Authorization: `Bearer ${token}`,
      Accept: 'application/json',
    },
    next: { revalidate: 60 },
  });

  if (!res.ok) {
    throw new Error(`Backend service error: ${res.statusText}`);
  }

  return res.json();
}