https://www.davidlang.tech/tags/app-router/ Recent content in App-Router on David Lang Hugo en Mon, 10 Jun 2024 00:00:00 +0000 https://www.davidlang.tech/posts/nextjs-app-router-complete-migration-guide/ Mon, 10 Jun 2024 00:00:00 +0000 https://www.davidlang.tech/posts/nextjs-app-router-complete-migration-guide/ <p>Migrating from Pages Router to App Router unlocks RSC, layouts, and improved data fetching-but requires deliberate planning.</p> <h2 id="folder-structure">Folder Structure</h2> <div class="highlight"><pre tabindex="0" style="color:#93a1a1;background-color:#002b36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>app/ </span></span><span style="display:flex;"><span> layout.tsx # Root layout </span></span><span style="display:flex;"><span> page.tsx # / </span></span><span style="display:flex;"><span> blog/ </span></span><span style="display:flex;"><span> [slug]/ </span></span><span style="display:flex;"><span> page.tsx # /blog/:slug </span></span><span style="display:flex;"><span> api/ </span></span><span style="display:flex;"><span> hello/ </span></span><span style="display:flex;"><span> route.ts # Route Handlers </span></span></code></pre></div><h2 id="data-fetching">Data Fetching</h2> <p>Replace <code>getServerSideProps</code> with async Server Components. Replace <code>getStaticProps</code> with <code>fetch</code> and <code>revalidate</code> options. Client data still uses SWR or React Query in Client Components.</p>