{% raw %} Always provide separate implementation instructions for Next.js App Router (13+) and Pages Router. These routing systems have different file structures, initialization requirements, and component placement: - **App Router**: Place components and configuration in the appropriate files within the `app` directory: ```tsx // app/layout.tsx for root configuration export default function RootLayout(props: { children: React.ReactNode }) { return ( {/* Manually add ID for styling hooks */} {props.children} ); } ``` - **Pages Router**: Use custom files in the root directory: ```tsx // pages/_document.tsx (needs to be manually created) export default function Document() { return (

); } ``` When documenting features, clearly indicate which router approach is being used and provide separate examples for each. Always note router-specific requirements like manually adding element IDs (`id="__next"`) for App Router that were automatically handled in earlier versions. {% endraw %}