After talking to hundreds of developers and looking at thousands of Next.js repositories, I've noticed ten common mistakes when building with the Next.js App Router. This post will share why these mistakes can happen, how to fix them, and some tips to help you understand the new App Router model. Link to heading Using Route Handlers with Server Components Consider the following code for a Server Component: export default async function Page ( ) { let res = await fetch ( 'http://localhost:3000/api/data' ) ; let data = await res . json ( ) ; return < h1 > { JSON . stringify ( data ) } </ h1 > ; } Fetching JSON data from a Route Handler in a Server Component. This async component makes a request to a Route Handler to retrieve some JSON data: export async function GET ( request : Request ) { return Response . json ( { data : 'Next.js' } ) ; } A Route Handler that returns static JSON data. There's two main issues with this approach: Both Route Handlers and Server Components run securely on the server.…