--- title: I Deleted Hundreds of Lines of Next.js Code. I Don’t... description: A practical walkthrough of seven Next.js App Router features that replace hand-rolled boilerplate: Server Actions eliminate API route files and fetch calls,... canonical: https://daily.dev/posts/i-deleted-hundreds-of-lines-of-next-js-code-i-don-t-miss-any-of-it--gdqixunkv twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: I Deleted Hundreds of Lines of Next.js Code. I Don’t Miss Any of It. | daily.dev og:description: A practical walkthrough of seven Next.js App Router features that replace hand-rolled boilerplate: Server Actions eliminate API route files and fetch calls,... og:url: https://daily.dev/posts/i-deleted-hundreds-of-lines-of-next-js-code-i-don-t-miss-any-of-it--gdqixunkv og:image: https://api.daily.dev/og/posts/gdQIxuNKv.png og:image:alt: I Deleted Hundreds of Lines of Next.js Code. I Don’t Miss Any of It. og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # I Deleted Hundreds of Lines of Next.js Code. I Don’t Miss Any of It. **[Medium](https://daily.dev/sources/medium_js)** · 8 min read · 1 upvotes · 0 comments ## Summary A practical walkthrough of seven Next.js App Router features that replace hand-rolled boilerplate: Server Actions eliminate API route files and fetch calls, Parallel Routes remove tab state, Intercepting Routes replace modal state management, after() fixes fire-and-forget async bugs, loading.tsx/error.tsx replace manual loading/error state, the 'use cache' directive replaces unstable_cache wrappers, and Route Groups clean up layout duplication. Each section shows before/after code and honestly covers the trade-offs and gotchas, noting that these features increase Next.js lock-in and some (like 'use cache') are still early-stage. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I replace an API route and fetch call with a Server Action in Next.js? Define an async function in a file with the "use server" directive at the top, accept a FormData argument, and perform the database call directly inside it. Then pass that function to a form's action prop, such as

, eliminating the separate route handler and client-side fetch/loading state logic entirely. _Developers modernizing Next.js data mutations can compare Server Actions patterns like this on daily.dev._ ### What does the after() function do in Next.js and why use it over an unawaited promise? after(), imported from next/server, schedules code to run after the response has already been sent to the client, unlike an unawaited fire-and-forget promise which can be killed mid-flight if the runtime tears down the function early. It's meant for tasks like logging analytics events after an order completes, but its behavior is runtime-dependent, so it should be verified on the actual hosting platform before relying on it for anything critical like billing events. _Teams relying on background tasks in Next.js can track runtime-specific caveats like this via daily.dev._ ### How do intercepting routes work for building a modal in Next.js App Router? Intercepting routes use a folder named (.)[id] alongside a regular [id]/page.tsx route so that clicking a link from within the app renders the content as a modal overlay, while directly visiting or refreshing that URL renders the full page instead. This gives a modal a real, shareable, refreshable URL with working back-button behavior without any manual state management for which item is open. _Developers wiring up shareable modal UIs in Next.js can reference conventions like this on daily.dev._ ## Similar posts on daily.dev - [6 React Server Component performance pitfalls in Next.js](https://daily.dev/posts/6-react-server-component-performance-pitfalls-in-next-js-0nalrupgs) · LogRocket · 6 upvotes · 0 comments - [I Reduced Our React Bundle by 70% Without Removing a Single Feature](https://daily.dev/posts/i-reduced-our-react-bundle-by-70-without-removing-a-single-feature-szhhzvcpd) · Medium · 18 upvotes · 3 comments - [How to Build Reusable Architecture for Large Next.js Applications](https://daily.dev/posts/how-to-build-reusable-architecture-for-large-next-js-applications-bdnbcslfm) · freeCodeCamp · 6 upvotes · 0 comments - [Next.js 16.3: Instant Navigations, Up to 90% Less Dev Memory and Faster Builds](https://daily.dev/posts/next-js-16-3-instant-navigations-up-to-90-less-dev-memory-and-faster-builds-abksajvqx) · InfoQ · 3 upvotes · 1 comments --- Tags: [#react](https://daily.dev/tags/react), [#typescript](https://daily.dev/tags/typescript), [#nextjs](https://daily.dev/tags/nextjs) [View this post on daily.dev](https://daily.dev/posts/i-deleted-hundreds-of-lines-of-next-js-code-i-don-t-miss-any-of-it--gdqixunkv) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"I Deleted Hundreds of Lines of Next.js Code. I Don’t Miss Any of It.","url":"https://daily.dev/posts/i-deleted-hundreds-of-lines-of-next-js-code-i-don-t-miss-any-of-it--gdqixunkv","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/i-deleted-hundreds-of-lines-of-next-js-code-i-don-t-miss-any-of-it--gdqixunkv"},"datePublished":"2026-07-23T18:10:41.688Z","dateModified":"2026-09-14T06:13:40.948Z","description":"A practical walkthrough of seven Next.js App Router features that replace hand-rolled boilerplate: Server Actions eliminate API route files and fetch calls,...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/d89f70e75f7a7175f402046963461cb4?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/d89f70e75f7a7175f402046963461cb4?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Medium","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Medium","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/medium","url":"https://daily.dev/sources/medium_js"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/i-deleted-hundreds-of-lines-of-next-js-code-i-don-t-miss-any-of-it--gdqixunkv","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,typescript,nextjs","timeRequired":"PT8M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Medium","item":"https://daily.dev/sources/medium_js"},{"@type":"ListItem","position":3,"name":"I Deleted Hundreds of Lines of Next.js Code. I Don’t Miss Any of It."}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/i-deleted-hundreds-of-lines-of-next-js-code-i-don-t-miss-any-of-it--gdqixunkv#faq","mainEntity":[{"@type":"Question","name":"How do I replace an API route and fetch call with a Server Action in Next.js?","acceptedAnswer":{"@type":"Answer","text":"Define an async function in a file with the \"use server\" directive at the top, accept a FormData argument, and perform the database call directly inside it. Then pass that function to a form's action prop, such as , eliminating the separate route handler and client-side fetch/loading state logic entirely. Developers modernizing Next.js data mutations can compare Server Actions patterns like this on daily.dev."}},{"@type":"Question","name":"What does the after() function do in Next.js and why use it over an unawaited promise?","acceptedAnswer":{"@type":"Answer","text":"after(), imported from next/server, schedules code to run after the response has already been sent to the client, unlike an unawaited fire-and-forget promise which can be killed mid-flight if the runtime tears down the function early. It's meant for tasks like logging analytics events after an order completes, but its behavior is runtime-dependent, so it should be verified on the actual hosting platform before relying on it for anything critical like billing events. Teams relying on background tasks in Next.js can track runtime-specific caveats like this via daily.dev."}},{"@type":"Question","name":"How do intercepting routes work for building a modal in Next.js App Router?","acceptedAnswer":{"@type":"Answer","text":"Intercepting routes use a folder named (.)[id] alongside a regular [id]/page.tsx route so that clicking a link from within the app renders the content as a modal overlay, while directly visiting or refreshing that URL renders the full page instead. This gives a modal a real, shareable, refreshable URL with working back-button behavior without any manual state management for which item is open. Developers wiring up shareable modal UIs in Next.js can reference conventions like this on daily.dev."}}]} ```