# nextjs Published articles for nextjs. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Build a directory listing website with Next.js, Supabase, and Stripe DevFeed: [Build a directory listing website with Next.js, Supabase, and Stripe]() Original publisher: [Read original article]() Author: iHateReading Published: 2026-07-10T05:43:02Z Content type: tutorial Language: en Sources: [iHateReading]() Topics: [Next.js](), [stripe](), [Supabase]() Tags: [backend](), [blockchain](), [boilerplate](), [build-a-directory-listing-website-that-earns-online](), [building](), [coding](), [development](), [directory](), [frontend](), [ihatereading](), [javascript](), [nextjs](), [node-js](), [product](), [programming](), [react](), [starterkit](), [stripe](), [tools](), [tools-directory-boilerplate-starterkit](), [typescript](), [web-development]() ### AI overview A starter kit for building a directory listing website with Next.js, Supabase, and Stripe. ### Source excerpt A starter kit to quickly make your own directory listing website using Nextjs, Supabase and Stripe ## Next.js error handling: a practical guide DevFeed: [Next.js error handling: a practical guide]() Original publisher: [Read original article]() Author: Farhan Hasin Chowdhury Published: 2026-06-18T07:00:00Z Content type: tutorial Language: en Sources: [Honeybadger]() Topics: [Next.js](), [API](), [bug](), [React]() Tags: [api](), [authentication](), [error-handling](), [error-reporting](), [guide](), [javascript](), [javascript-articles](), [next-js](), [nextjs]() ### AI overview A practical guide to handling expected and unexpected errors in Next.js applications using the App Router. It covers return-value-based handling for expected errors, Server Actions, Server Components, 404 responses, error boundaries, and Honeybadger-based production error reporting. ### Source excerpt Next.js gives developers a structured way to handle errors at every level of an application -- from form validation to root-level crashes. Learn how to manage expected errors with return values, catch uncaught exceptions with error boundaries, and set up automatic error reporting in production. ## Stop Defaulting to "use client": A Practical Mental Model for React Server Component Architecture DevFeed: [Stop Defaulting to "use client": A Practical Mental Model for React Server Component Architecture]() Original publisher: [Read original article]() Author: Clarisse Leduc Published: 2026-04-21T11:14:11Z Content type: tutorial Language: en Sources: [JobTeaser]() Topics: [React](), [Next.js](), [Web Development]() Tags: [architecture](), [front-end-development](), [how-to](), [next-js](), [nextjs](), [react](), [react-server-component](), [software-engineering]() ### AI overview A practical guide to React Server Component architecture in Next.js. It recommends defaulting to Server Components and using Client Components only where interactivity is required, keeping client boundaries close to interactive elements to reduce shipped JavaScript. ### Source excerpt How thinking in server-first component boundaries can simplify data flow and reduce client JavaScript in Next.js applications. When I first started working with the Next.js App Router, I kept running into the same situation. Components would suddenly break -- usually after adding a hook or a click handler. The fix felt obvious: add "use client". But after doing this a few times, I realised something: I was slowly turning my application back into a traditional client-side React app. Which defeats the whole point of React Server Components. The real challenge isn't learning how to use Client and Server Components. It's learning how to decide where code should run. Once that mental model clicked, structuring Next.js applications became much clearer -- and often more performant. The Mental Model React Server Components introduce a simple but powerful separation of responsibilities. A helpful rule of thumb: Default to Server Components. Use Client Components only when interactivity is required. Think of it like this: This small shift in thinking has a big impact on how you design component trees. A Simple Example Consider a typical product page. export default async function ProductPage({ params }) { const product = await getProduct(params.id, { cache: "no-store" }) if (!product) { notFound() // Next.js helper for 404 pages } return ( <> ) } Here: ProductPage -> Server Component ProductDetails -> Server Component AddToCartButton -> Client Component Only the interactive part runs in the browser. Everything else stays on the server, meaning less JavaScript shipped to the user. The "use client" Boundary One subtle detail that often surprises developers is that "use client" creates a boundary in the component tree. If a component is marked as a Client Component, all of its children become Client Components too. Example: "use client" export default function Page() { return ( ) Original publisher: [Read original article]() Author: iHateReading Published: 2026-03-10T14:15:33Z Content type: tutorial Language: en Sources: [iHateReading]() Topics: [Artificial Intelligence](), [Large Language Model](), [npm](), [Development]() Tags: [ai](), [api](), [backend](), [blockchain](), [coding](), [development](), [frontend](), [honojs](), [ihatereading](), [javascript](), [llm](), [nextjs](), [node-js](), [npm](), [product](), [program](), [programming](), [prompt-to-video-app](), [react](), [remotion](), [remotion-honojs-nextjs-api](), [typescript](), [web-development]() ### AI overview A step-by-step tutorial on generating a video using an AI LLM and the Remotion npm module. The supplied evidence does not provide further implementation details. ### Source excerpt Hey there!! Welcome to the new blog In this blog, I'll be telling the step-by-step process to generate a video using AI LLM and the remotion npm module program... ## How to Build a Documentation Website DevFeed: [How to Build a Documentation Website]() Original publisher: [Read original article]() Author: iHateReading Published: 2025-12-04T15:10:16Z Content type: tutorial Language: en Sources: [iHateReading]() Topics: [Documentation](), [Website](), [Development]() Tags: [backend](), [blockchain](), [buidling-documentation-website](), [coding](), [development](), [documentation](), [documentation-website-template-nextjs-tailwind-react-markdown](), [frontend](), [how-to](), [ihatereading](), [javascript](), [nextjs](), [node-js](), [product](), [programming](), [react](), [react-markdown](), [tailwind](), [typescript](), [web-development](), [website](), [website-template]() ### AI overview A tutorial about making a documentation website, prompted by a reader asking how to create one while using Mintlify and Fuma docs. ### Source excerpt Hello and welcome to today's blog Recently, I got an email from a person asking how he can make a documentation website. He was using Mintlify and Fuma docs, b... ## Animated Gradient Generator app DevFeed: [Animated Gradient Generator app]() Original publisher: [Read original article]() Author: iHateReading Published: 2025-11-12T07:27:27Z Content type: tutorial Language: en Sources: [iHateReading]() Topics: [Development](), [App]() Tags: [animated-gradient-generator-app](), [animation](), [backend](), [blockchain](), [building](), [coding](), [css](), [development](), [frontend](), [gradient-generator](), [gradient-generator-css-animation-tool-nextjs](), [ihatereading](), [javascript](), [nextjs](), [node-js](), [product](), [programming](), [react](), [tool](), [typescript](), [web-development]() ### AI overview A developer article about building an Animated Gradient Generator app. ### Source excerpt Hello and welcome to new blog Today's story is about building an Animated Gradient Generator. Well, the idea came into mind because of gettemplate.website prem... ## @apollo/client-integration-nextjs Officially Released DevFeed: [@apollo/client-integration-nextjs Officially Released]() Original publisher: [Read original article]() Author: Lenz Weber-Tronic Published: 2025-04-07T11:26:16Z Content type: release Language: en Sources: [Apollo Blog]() Topics: [apollo-client](), [Next.js](), [React](), [Server-side rendering](), [Streaming](), [React Router]() Tags: [apollo](), [apollo-client](), [next-js](), [nextjs](), [react](), [react-router](), [release](), [ssr](), [streaming]() ### AI overview Apollo Client's Next.js integration has been released as a stable package after testing and community feedback. The release includes a renamed package, multipart response support, query preloading in RSC, cache rehydration, and compatibility with streaming SSR. ### Source excerpt Exciting News: Officially Released! After almost two years of testing, gathering user feedback, and refining our approach, we're thrilled to announce that has been released as a stable package with the new name . This milestone marks a significant achievement for the Apollo Client community 🎉 A Brief History of Apollo Client + Next.js When we first started working on this integration, we were concerned about potential race conditions during hydration with how Next.js works. ## Migrating from Hugo to NextJS DevFeed: [Migrating from Hugo to NextJS]() Original publisher: [Read original article]() Published: 2025-03-10T00:00:00Z Content type: opinion Language: en Sources: [Gaurav Sarma's Blog]() Topics: [cursor](), [Hugo](), [Claude](), [Development](), [Firebase]() Tags: [blog](), [claude](), [coding](), [cursor](), [development](), [firebase](), [hugo](), [nextjs]() ### AI overview The author compares AI coding tools while migrating a Markdown-based blog from Hugo to a NextJS application with search and Firebase functionality. Cursor is preferred over Claude Code, Cursor, and Windsurf based on the reported balance of capability and cost, but the author notes concerns about code ownership, reduced understanding of the codebase, disabled type checks, shortcuts, and looping behavior. ### Source excerpt So it's been a week since I have been trying to use and compare AI code editors and tools extensively to integrate into my coding routine. Claude Code has been the most successful, but it's way too expensive compared to Cursor or Windsurf... ## TDD February 2025 Agenda DevFeed: [TDD February 2025 Agenda]() Original publisher: [Read original article]() Author: Denis Čahuk Published: 2025-02-03T15:48:33Z Content type: article Language: en Sources: [Crafting Tech Teams]() Topics: [Test-driven development](), [Testing](), [Mocking](), [Development]() Tags: [2025](), [mocking](), [nextjs](), [tdd](), [testing]() ### AI overview A February 2025 agenda for TDD-related events, including talks on self-testing code, a new TDD booklet release, reaction streams, live chats, and a session on test-driven development with Next.js. ### Source excerpt What you can expect and goodies! ## Conduct a technical migration within less than 6 months -- Part 3 (final) DevFeed: [Conduct a technical migration within less than 6 months -- Part 3 (final)]() Original publisher: [Read original article]() Author: Fabien RAYNAUD Published: 2024-12-02T09:47:16Z Content type: tutorial Language: en Sources: [JobTeaser]() Topics: [migration](), [Next.js](), [Developer experience](), [Automation](), [maintenance]() Tags: [automation](), [developer-experience](), [maintenance](), [migration](), [next-js](), [nextjs](), [project-management](), [software-development]() ### AI overview The final part of a three-part article about conducting a technical migration at JobTeaser, based on the author's experience with a Next.js migration. It focuses on preparing the organization, organizing the project, preserving developer experience, maintaining automation and documentation, and training the team. ### Source excerpt Conduct a technical migration within less than 6 months -- Part 3 (final)based on Next.js migration, performed at JobTeaser What is this 3-parts article about: sharing my own experience with handling a technical migration 📖 some additional elements that I find relevant and could help (identified with 📖 emoji) but not personally tested What this presentation is NOT about: technical step-by-step Next.js migration the perfect and only way to do a migration I tried to be as exhaustive as possible, but I didn't even complete all the points personally. So the presentation is a mix of my personal experience and all the things that could help to do it "qualitatively". Pick what is necessary for you and your ecosystem. 3 main parts: Buying time and sponsorship to be able to perform such a migration = creating a good environment to navigate easily to success Organize your project = keep an eye on and communicate about what was done and what needs to be done ▶ Preserve the developer experience = ensure use, sustainability, and future maintenance of the migration You are now ready to focus on the implementation but do not hesitate to make a step aside and check if the learning curve is not too big for newcomers on the migrated part. Preserve the Developer's Experience Finally, it is important to preserve the Developer's Experience throughout the migration process. This means minimizing disruption to the development environment and ensuring that developers can continue to work efficiently. It also means preparing the next step of the project (outside migration) and making it efficient as soon as possible. Analyze and preserve the current development environment of the team Check the used tools and the compatibility after the migration, and communicate if you need to remove one Keep automation as much as possible, nobody wants to get back to manual stuff after a migration Take time to document (update) what you are keeping, newcomers would thank you for that Train the team to be ## Conduct a technical migration within less than 6 months -- Part 2 DevFeed: [Conduct a technical migration within less than 6 months -- Part 2]() Original publisher: [Read original article]() Author: Fabien RAYNAUD Published: 2024-12-02T09:46:56Z Content type: tutorial Language: en Sources: [JobTeaser]() Topics: [migration](), [Next.js](), [Developer experience](), [maintenance]() Tags: [developer-experience](), [implementation](), [maintenance](), [migration](), [next-js](), [nextjs](), [project-management](), [software-development]() ### AI overview Part 2 of a three-part article about conducting a Next.js technical migration at JobTeaser. It focuses on organizing the migration project by defining a realistic MVP scope, prioritizing tasks, assigning work, communicating progress, and setting deadlines. ### Source excerpt Conduct a technical migration within less than 6 months -- Part 2based on Next.js migration, performed at JobTeaser What is this 3-parts article about: sharing my own experience with handling a technical migration 📖 some additional elements that I find relevant and could help (identified with 📖 emoji) but not personally tested What this presentation is NOT about: technical step-by-step Next.js migration the perfect and only way to do a migration I tried to be as exhaustive as possible, but I didn't even complete all the points personally. So the presentation is a mix of my personal experience and all the things that could help to do it "qualitatively". Pick what is necessary for you and your ecosystem. 3 main parts: Buying time and sponsorship to be able to perform such a migration = creating a good environment to navigate easily to success ▶ Organize your project = keep an eye on and communicate about what was done and what needs to be done Preserve the developer experience = ensure use, sustainability, and future maintenance of the migration Now that you have convinced the right people and made a big-picture plan, time to jump into the project, whether you are part of the implementation team or not. Organize your project The second step is to organize the project. This includes cleaning the scope of the migration regarding the most important tasks and secondary ones that could be done later. It's also about having a clean place to organize, prioritize, and communicate the project execution. Define the "real" scope of the migration = MVP with only the mandatory tasks: Be prepared for the next steps. You won't be able to perform all the tasks from the initial plan by yourself or with the initial team, only the most important ones Listing and specifying secondary tasks is important for the next steps of the project (after the migration) Continue your technical watch on the subject and adjust the migration if necessary, nobody wants an already deprecated solution. A ## Conduct a technical migration within less than 6 months -- Part 1 DevFeed: [Conduct a technical migration within less than 6 months -- Part 1]() Original publisher: [Read original article]() Author: Fabien RAYNAUD Published: 2024-12-02T09:46:26Z Content type: tutorial Language: en Sources: [JobTeaser]() Topics: [migration](), [Next.js](), [Developer experience](), [Front end]() Tags: [developer-experience](), [frontend](), [migration](), [next-js](), [nextjs](), [project-management](), [software-development](), [technical]() ### AI overview Part 1 of a three-part article shares a personal experience conducting a technical migration to Next.js at JobTeaser. It covers securing sponsorship and time, organizing the project, preserving developer experience, and a timeline involving an audit, production ecosystem, and first use case. ### Source excerpt Conduct a technical migration within less than 6 months -- Part 1based on Next.js migration, performed at JobTeaser What is this 3-parts article about: sharing my own experience with handling a technical migration 📖 some additional elements that I find relevant and could help (identified with 📖 emoji) but not personally tested What this presentation is NOT about: technical step-by-step Next.js migration the perfect and only way to do a migration I tried to be as exhaustive as possible, but I didn't even complete all the points personally. So the presentation is a mix of my personal experience and all the things that could help to do it "qualitatively". Pick what is necessary for you and your ecosystem. 3 main parts: ▶ Buying time and sponsorship to be able to perform such a migration = creating a good environment to navigate easily to success Organize your project = keep an eye on and communicate about what was done and what needs to be done Preserve the developer experience = ensure use, sustainability, and future maintenance of the migration Timeline of the migration 🔍 Concrete "real life" timing 2 weeks to build an audit in August, done in autonomy and presented to frontend chapter, management, and tech leadership 3 months to put a minimalist ecosystem into production, from November to January, done mainly in autonomy with the help of the Devex and Infra team, and also from hyped frontend engineers 2 months for the release of the first "real life" use case, from February to March, by a squad of 3 engineers + 2 others squads starting their own features on the new stack Buying time and sponsorship to do the migration The first step is buying time and sponsorship for the migration. This is essential to ensure that the necessary resources and funding will be available for the initiative, aka the right environment, to perform the migration properly. This part is more about digging into the pros and cons of this migration and being able to explain it so people will ack ## React Server Components Add Capabilities and Complexity to React Development DevFeed: [React Server Components Add Capabilities and Complexity to React Development]() Original publisher: [Read original article]() Author: Mads Brodt Published: 2024-01-31T16:01:03Z Content type: opinion Language: en Sources: [Front-End Focus]() Topics: [React](), [Front end](), [web applications]() Tags: [async](), [framework](), [front-end](), [nextjs](), [react](), [web-applications]() ### AI overview The article examines how React Server Components and NextJS App Router change React development. It describes benefits such as server-side data loading and database access, while arguing that server/client boundaries add complexity and can make common patterns confusing. ### Source excerpt React is awesome.