211 Blog Posts To Learn About Nextjs

cover
25 Aug 2026

Let's learn about Nextjs via these 211 free blog posts. They are ordered by HackerNoon reader engagement data. Visit the Learn Repo or LearnRepo.com to find the most read blog posts about any technology.

Next.js is a flexible React framework that gives you building blocks to create fast web applications. It's used on internet pages like this one :-)

1. Create React App is Dead! Here are Some Alternatives

CRA may be "dead", but there are many alternative tools available for building React applications that offer superior performance and faster development times.

2. 30 Next.js Interview Questions: Get Ready for Your Dream Job

Ace Your Next.js Interview with these commonly asked Next.js interview questions and answers.

3. Using Firebase Authentication with the Latest Next.js Features

A comprehensive, step-by-step guide on integrating Firebase Authentication with Next.js using the zero-bundle size next-firebase-auth-edge library.

4. Implement a Dynamic Breadcrumb in React/NextJS

5. How to manage state in Next.js 13 using Redux Toolkit

With server and client components in next.js 13, this tutorial will take you through integrating and managing state using redux toolkit in your project.

6. Storing and Retrieving Data in Next.js Using LocalStorage and TypeScript

Want to persist data in Next.js without using a lib or any third parties to achieve that, and still have the data not change or reset after refresh?

7. 6 Easy Steps to Use Next Auth in Next.js 13 Using Route Handler

Next.js is a JavaScript framework that enables developers to create front-end web applications that are run on a server. It is a React-based framework that is e

8. Next.js and File Downloads: Three Ways to Restrict Access to a File

Let's see exactly how we can protect files in next.js and allow certain users only to download them. Click to read the article...

9. Why You Must Use Next.js to Get the Benefits of React

10. How To Use Debounce in Next.js

Understanding Debounce in Next.js

11. Building Real-time Apps with Next.js 13.4 Server Actions

With this article, learn to construct a real-time application, leveraging the power and finesse of Next.js 13.4 server actions.

12. VS Code Tutorial: How To Set Up A React.js Project With Next.js

Express.js framework provides inbuild APIs which are very useful to build fast and scalable applications efficiently with React.js.

13. Next.Js 13 Parallel Routes: A Comprehensive Guide

Welcome to this comprehensive guide on parallel routes in Next.js.

14. Streaming in Next.js 15: WebSockets vs Server-Sent Events

Next.js supports both WebSockets and Server-Sent Events (SSE), making it an excellent choice for building scalable real-time applications.

15. Qwik vs Next.js: Speed Comparison

A benchmark comparison and analysis between Qwik and Next.js 13.

16. Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and More

Learn to create a Full Stack Airbnb Clone with Amplication: Low-code Next.js frontend, Tailwind CSS styling, JWT-based auth, Mapbox API maps, and more.

17. It's Hard to Create a PWA With Next.js: But Why?

Discover the challenges of creating PWAs with Next.js, the powerful next-pwa plugin, and the exciting future with the @imbios/next-pwa package.

18. A Step-by-Step Guide to Building a Simple Next.js 13 Blog

Building a simple blog with Next.js 13

19. Alternatives to Create React App

I see a lot of discussion around CRA being outdated and we should replace it with Vite. This blog discusses CRA's problems and alternatives we can use.

20. Setting Up Google Analytics 4 in a Next.js Project

Google Analytics is a web analytics service that tracks and reports several types of website traffic.

21. What is Next.JS and How to Debug it

Next.JS allows the developers to create Server-side, Client-side or Static websites. Unlike the other frameworks, the rendering in Next JS is per page. That means, the "about" page can be static, while the "home" page can be server-side.

22. Next.js Internationalization (i18n) Tutorial

How to set up a multi-language Next.js project with built-in support for internationalized routing and react-intl library.

A review of popular React Frameworks that can be used to develop React Applications.

24. Next.js and SignalR: Effortless Socket Integration and Troubleshooting

Next.js and SignalR integration. Next.js and SignalR troubleshooting

25. Demystifying React Hooks: Usage, Examples, and Common Mistakes

Unleash the full potential of React Hooks! Discover how to leverage this powerful feature to enhance your React applications with examples and common pitfalls.

26. How to Build a Web Page Summarization App With Next.js, OpenAI, LangChain, and Supabase

An app that can understand the context of any web page. We'll show you how to create a handy web app that can summarize the content of any web page

27. How to Upload Source Maps to Sentry with Next.js

Troubleshooting with source maps uploading to Sentry with Next.js

28. Using Next.js + Playwright + GitHub Actions to Make a To-Do App

A comprehensive Todo app with APIs and E2E tests with GitHub Actions enabled.

29. How to Send Email Verification in Next.js 14 With NextAuth.js, Resend, and React Email

How to implement secure email verification in Next.js 14 using NextAuth.js, Resend, and React Email. Enhance your web application's security and user experience

30. Implementing i18n in Next.js: A Guide to Non-Route-Based Localization

Next.js: A Guide to Non-Route-Based Localization

31. Hiding Your API Credentials Client Side Using a Proxy Server in React

When you're writing client-side code to make API requests, you might need a Proxy Server to hide your API Credentials. Let's see how to do this for React apps.

32. Next.js vs React: Who Wins the Battle?

There are two popular options for creating web applications with React: Next.js and React Router. Both have their pros and cons, but which one.

33. Bridging Design and Development: Creating an Open-Source Portfolio Website Template for Designers

Bridging Design and Development: Creating an open-source portfolio website template for designers. Easy customization, visual focus, and one-click deployment.

34. The Ultimate Guide to Integrating Cloudinary With Next.js

Enhance your web app's performance with Cloudinary in Next.js! Optimize media delivery and improve user experience. Learn how in our step-by-step guide.

35. Optimizing SEO in Next.js: Techniques for Better Search Engine Visibility

In this blog post, we will explore advanced techniques for optimizing SEO in Next.js to enhance search engine visibility and attract more organic traffic.

36. Creating Effective And Optimized Next.JS Reusable Components.

Learn to create reusable components in React for better code organization and maintenance, using ComponentProps and HTMLAttributes interfaces for adaptability..

37. How to Create a Personal WebDev IDE in Next.js

In this tutorial, we'll explore the process of building a functional web development Integrated Development Environment (IDE) using React within a Next.js appli

38. Level Up Your Front-End Game with These 8 Side-Project Ideas 🥇

Over the span of a year, I created 8 web app and game clones. I decided to share them, so the community can get some inspiration to build as well.

39. Create a Gradient Border With TailwindCSS and React

This blog post is a small tutorial in which I show you how you can create a gradient border blog card using Tailwind CSS.

40. How to Use Zero Knowledge Dapp Boilerplate

Learn how to build zero knowledge dapps, using zero knowledge proofs boilerplate. Build age verification dapp using zero knowledge proofs.

41. Understanding the Complexities of Next.js v13

Next.js v13 was released by Vercel at the Next.js conference in October 2022, bringing many new features and improvements.

42. Mastering Monorepos: Organizing Component NextJS Libraries & Projects with NPM Workspaces

Discover NPM Workspaces & Monorepos for efficient project management, empowering NextJS & Storybook integration in a unified repository.

43. Creating a React Form Repeater Component: A Step-by-Step Guide

Learn how to create a React Form Repeater Component,

44. How to Implement Authentication in Next.js 14 With NextAuth.js, Shadcn/ui, react-hook-form, and Zod

Master Next.js 14 authentication with NextAuth.js, react-hook-form, & Zod. Learn to secure apps with email/password auth & more in this concise guide.

45. Why localStorage Still Crashes Your Website in 2023

How to deal with the Browser SecurityError: The operation is insecure or localStorage is not defined.

46. How to Build a Powerful Status Page With Great Performance and Design

This tutorial shows how a lightweight and performant time-series database coupled with queued status checks and a simple UI are best for robust applications.

47. Gatsby.js vs. Next.js: The Best React Framework and Its Use Cases

Gatsby.js vs. Next.js: Gatsby.js is better for static websites, while Next.js is better for dynamic or hybrid multi-user websites.

48. Getting Started with React Server Components: A Step-by-Step Tutorial

React Server Components are a new feature that lets you build apps that combining the interactivity of client-side apps with the performance of server rendering

49. The Step-by-Step Guide to Deploying Your Next.js App to Firebase Hosting

In this tutorial, I’ll show you how to deploy a full-stack JavaScript web app into Firebase. We’ll deploy a Next.js application to Firebase hosting.

50. How To Create a Static, Personal Website for Less Than $1 a Month

The goal of this post is to show you how you can create your own static personal website for under $1 a month.

51. 7 Easy Steps to Set Up Google Analytics on Your Next.JS Website

A guide to help you set up Google Analytics 4 on your Next.js website.

52. TemplatesKart: Is this the Best Chakra UI Component Library?

Responsive chakra ui components, templates and projects. Production-ready hand crafted chakra Components and templates. Deliver your projects faster.

53. Using ChatGPT as an Educational Chatbot in a Next.js Frontend: A Guide

Let’s try our hand at building just such a frontend integration — a chat helper that can use OpenAI to answer a potential student’s questions...

54. How to Set Up Authentication With AWS Amplify in Next

Authentication is a way for applications to confirm user identity before granting permission or entry to a website.

55. How I Built an Online Radio with Soundcloud and NextJS

56. A Deep Dive into Styles and Structure Partitioning in Software Architecture

Learn about software architecture styles and structure partitioning, their implementation, use cases, and a practical TODO example system.

57. How To Create A User Portal On Airtable With Sync Inc And React

In this tutorial, you’ll see how to build a scalable, secure, and flexible client portal on Airtable using Sync Inc, Cotter, and Next.js.

58. Creating a Todo App with NextJs & Firebase

Hey devs, welcome to this tutorial; we will build a real-time Todo App with React, NextJs + Firebase.

59. Top 15 React Interview Questions & Answers You Need To Know in 2022

In this article, we'll go over some of the most common React interview questions and how to answer them.

60. Docker Image Optimization - Lean Docker Images for Next.JS

Using multi-stage builds to optimize production Docker image for faster deployment.

61. Integrating Stripe Checkout with Next.js Is Easier Than You Think

Learn how to seamlessly integrate Stripe Checkout with Next.js in this step-by-step guide. Set up a sandbox environment, get your API keys, and start accepting

62. How to Use mdx-bundler with Next.js

A short post on how to get started with mdx-bundler in Next.js

63. Resolving the FOUC Issue in Next.js App Routes

Learn how to diagnose and fix Flash of Unstyled Content (FOUC) in Next.js 14 with our step-by-step guide.

64. Embed an In-browser Code Preview into Your React Application with Sandpack

Sandpack is a react library that helps you to add a live, in-browser coding environment to your react application easily.

65. Connecting React 17, TypeScript, Tailwind CSS, NextJS Into Developers Friendly Application

NextJS is becoming a de facto framework for modern web development. In this article we will build a starter repo that you can use for every new project.

66. A Step-by-Step Guide to Authenticating Users in Your DApp with 'Sign in with Ethereum'

Connecting Your Decentralized Application (Dapp) with a Backend: A Step-by-Step Guide.

67. Dev without Ops - Why we are building The Vercel for Backend

It was a great feeling to see my first website live on the internet.

68. Choosing Between React, Gatsby, Next.js For Your Frontend

React, Gatsby, Next.js. Which of the three should you choose for your frontend web development and what should you understand before you make the decision?

69. The New Next.js and SWR Clients: What You Need to Know

So that's it, we are now using SWR as our default data fetching library, giving you all the benefits, like optimistic updates while consuming WunderGraph APIs.

70. Build Faster Next.js Static Sites Using MDX And Contentlayer

Publishing static content becomes so effortless with Next.js, MDX, and Contentlayer. This article will show you how easy it is to implement that system.

71. 5 Reasons to Convert from React to Next.js

React itself is a great solution already. But why are there many guides on "How to convert React to Next.js"? Let's find out why and when Next.js is better.

72. A Compilation of the Best Full-Stack Clones: Amazon, Whatsapp, Netflix, Spotify & More

Explore a world of web development innovation with full-stack clones of popular apps, from Amazon to WhatsApp. Discover endless possibilities in tech!

73. Hacker Noon Product Update Q1 2020

Welcome to code, where the metrics are made up and the points don’t matter. I’m not #1. I just commit more often. 😛

74. Build a Web3 Movie Streaming dApp using NextJs, Tailwind, and Sia Renterd

This tutorial series will guide you in creating a decentralized application that leverages Sia's blockchain to ensure user data ownership and privacy.

75. Let's Build a Real-Time Collaborative Document Editor Using My Web App Framework of Choice

Learn how to build a secure, real-time collaborative document editor with Next.js, Appwrite, Liveblocks, and Permit.io using ReBAC.

76. How to Build a Web3 Play-To-Earn Platform with Next.js, Typescript, and Solidity

This course will guide learners through the process of creating a full-stack Blockchain-Based Play-to-Earn dApp including the use of ERC20 tokens.

77. Building Dynamic Websites With AI-Generated Content Automation

Come on a journey with me as I create a self-generating news app, powered by automated AI-generated content.

78. 50+ GitHub Repositories Every Front-End Developer Needs

50+ Github Repositories Every Front-end Developer Needs

79. The 9 Mistakes JavaScript Developers Make the Most

In this article, we'll take a look at some of the most common JavaScript mistakes and how to avoid them.

80. Secure Your Next.js Apps with Jscrambler

In this article, we’ll look at how you can integrate Jscrambler into your Next.js app development workflow.

81. Building a Full Stack Amazon Clone with Next.js, Tailwind CSS, Zustand, Amplication and More.

This Amazon Clone features a wide range of technologies and functionalities, including Next.js, Tailwind CSS, Zustand, Typescript, Prisma and Amplicaiton

82. How to Build a Decentralized Charity Platform with Next.js, TypeScript, and Solidity

Build a decentralized application (Dapp) for a charity marketplace. Learn Solidity, Ethereum, OpenZeppelin, Next.js, TypeScript, Hardhat, EthersJs, Redux-Toolki

83. Enhancing Password Security and Recovery with Next.js 14 and NextAuth.js

Learn to set up a secure and user-friendly system for password recovery in Next.js, complete with token verification and email notifications.

84. Firebase Pagination Using StartAfter() and Nextjs

Firebase v9 Paging with StartAfter() + Nextjs 13.x.x

85. Why It's Your Destiny To Become A Full-Stack JavaScript Developer

I've never met a true, passionate web developer who isn't a multi-dimensional specialist interested in a wide variety of topics related to their job.

86. Building a Transparent, Secure Lottery DApp with NextJs, Solidity, and CometChat

If you're looking to build a cutting-edge decentralized application that combines the power of blockchain technology, real-time communication, and user-generate

87. Why I Ditched Wordpress to Save My Music Release and What I Did After

I’m a Chapman Stick player turned web developer. I’ve had a Wordpress site for my Electronic Prog-Rock music project since 2014, much before I started my career as a web developer in 2017. Since becoming a developer, I’ve wanted to rebuild the website but, a combination of time, lack of design chops, and a bit of ignorance of how to migrate all the plugin tools Wordpress provides delayed my project.

88. Setting Up NextJS 13 with Auth0 and Sub-Domains: A Guide to Multi-Tenancy Web Apps

Learn how to set up NextJS 13 with Auth0 for a web multi-tenancy app using sub-domains. Overcome issues with callbacks, grant_type, and logout URLs

89. JavaScript Becomes More Powerful Than Ever

JavaScript in 2025 is more powerful, expressive, and efficient than ever.

90. How to Create Apple Music's Background Blur Effect Using Blurhash

n this blog post, we'll learn how to create apple music's background blur effect using blurhash.

91. Build a Decentralized Voting Dapp with Next.js, TypeScript, Tailwind CSS, and CometChat

In this guide, we will teach you how to build your own decentralized voting dapp using Next.js, TypeScript, Tailwind CSS, and CometChat.

92. How To Score A Perfect 100 Google Lighthouse Score in Chrome Dev Tools

This is How I Built My Portfolio Site and personal blog using React and NextJS, and how it achieved a Perfect Lighthouse Score. I rundown all the fudamental iss

93. How I Built a Vendor Stall for Small Businesses to Sell Goods Online in Three Weekends

You can build an enterprise-grade app with low-level knowledge thanks to the myriad of robust services covering every aspect of a web product’s needs. In this article, I explore how I built an app over a couple of weekends in lockdown with not a lot of work.

94. How I Made Next.js and PWA Finally Get Along — With next-pwa-pack

A deep dive into building next-pwa-pack, a zero-config PWA toolkit for Next.js 15 with App Router, SSR, cache sync, and server revalidation.

95. How I Built a Warehouse Management App Called Cardus

A web app that allows users to create and manage their warehouse of items.

96. 5 reasons to consider Next.js for your next projects

Next.js is a framework built on React that gives frontend developers the flexibility of creating modern and scalable apps

97. Tutorial For Supabase And Next.js Fans On How To Build A Slack Clone

Creating a Slack clone with Supabase and Next.js

98. Nextjs User Login Authentication in 5 Simple Steps Using Auth0

In this post we are going to discuss, how you can set up a user Login authentication using Auth0 in Next.js projects.

99. Redesigning Apps Using Ruby On Rails: The Risks and The Risk-Free Approaches

Learn how to apply the new design to a Ruby on Rails app without risks to your business and do that cheaper.

100. The 7 Best React Component Libraries for 2022

In this article, I will be sharing with you 7 awesome React UI libraries that you should check out.

101. How to Build a Github User Finder App With Next.js & Tailwind CSS

In this project, we are going to build GitHub user Search App using Github API. We will design the UI of the app using Tailwind CSS with Next.js as a framework.

102. Sending an Invoice and Adding a Payment Reminder in Next.js with Courier API

How to send invoices and add a payment reminder in Next.js with Courier API. Utilizes React and JavaScript to build services in Node.JS.

103. These Full-stack Projects Are a Must for Your 2020 Portfolio 🤯

Procrastination, we've all dealed with it. But today because of this blog post you will find five full-stack projects you can add to your portfolio before the end of 2020!

104. How We Store User Prefs in Local Storage Using Hooks in Next.js

We decided to build a custom hook that would load and store user preferences from local storage, so users can start with the same settings applied.

105. Ethereum ️❤️ JavaScript: Cheatsheet

Bunch of code snippets solving most common problems every Web3 developer needs.

106. A Guide to Composing and Integrating APIs Together

With React/Next.js, the fundamental problem you’re solving is that of turning some notion of ‘state’ into DOM, with a focus on composability

107. 🔥 Building a pricing page and charging visitors — A NextJS Guide 🤯 🤯

I will show you how to build a page with multiple pricing tiers in this article.

108. Streamline NestJS Setup with Extensive React Boilerplate

Extensive React Boilerplate: what is it, what features include, how it complements Nest.js boilerplate to build full-stack apps

109. Building Highly Performant Applications With React Server Components

React introduced a new feature called React Server Components (RSC) in December 2020. RSC are a new type of React component that can run on the server

110. Predicting The State of Front End Development: 2021 Edition

Where is front-end development heading in 2021? Jay Freestone examines trends and technologies that will shape web development this year.

111. Building a GraphQL eCommerce App from Scratch

How to Build a GraphQL eCommerce App from Scratch

112. React’s New Server Components Might Be the Death of Bloated Web Apps

A senior-level deep dive into how React Server Components (RSC), SSR, and CSR work together in Next.js 15 — and why server-first rendering is the future.

113. Docker for Beginners: Containerizing a Nextjs Application

Containerization in it's entirety is an incredibly useful concept. From being able to execute applications in isolation, to being able to port them easily..

114. This Open Source Tool Can Spin Up Entire Websites from a Single Prompt

Your collaborative AI assistant to design, iterate, and scale full-stack applications for the web.

115. Build a Production Ready Restaurant Website with Next.js 12 and Cosmic

How you can use Next.js and Cosmic to create special web pages such as restaurant websites that include restaurant menus that have many images and animations.

116. Next vs Gatsby: Comparing Their Approach to Handling Data

Next.js and Gatsby are modern front-end frameworks based on React.

117. Automatic Image Optimization: Next.js 10 New Standards for 2020

Vercel has recently announced the latest version of its React-based web framework- Next.js 10.

118. How to Create a Simple Object Detector with NextJs

A simple tutorial for beginners to create an object detector with NextJs.

119. How to Fix a 404 Error When Getting a YouTube Video Thumbnail in Next.js

You might occasionally see a 404 error in the console log when displaying a YouTube thumbnail.

120. Authentication in Web Apps: Connecting Auth0, ASP.NET Core and Nuxt.js

User authentication and authorization can be difficult and time consuming. Getting it wrong can also have disastrous consequences, such as malicious users accessing and stealing personal or sensitive information from your app.

121. TwNFT - Mint your tweets as NFTs easily and for free

In this post, I introduce TwNFT, an application that lets you mint your tweets as NFTs easily and for free and explain how it works and how I made it.

122. How to add Video Call and Voice Call Functionality in a Full Stack Whatsapp Clone

This blog post demonstrates how to integrate Zegocloud's services for Video Call and Voice Call functionality into a Full Stack WhatsApp Clone.

123. Build an AI Agent That Out-Researches Your Competitors

Build your own Perplexity-style deep research AI agent using Next.js 15, OpenAI & exa.ai. Complete architectural guide with production-ready TypeScript code.

124. Configuring WordPress as Headless CMS using REST API with Nextjs

In today’s blog, we are going to see how we can configure WordPress as Headless CMS using REST API with Nextjs.

125. What Makes Next.js so Good?

126. How to Build a Video Call App with ZEGOCLOUD and React

In this blog post, I will show you how to create a video call app using ZEGOCLOUD and React. ZEGOCLOUD is a cloud-based video call platform.

127. An Essential Guide to Feature Toggles Using Next.JS and React

This post will show you how to build the Feature Toggle mechanism in your Next.JS application. We are going to use Next.JS, React, and TypeScript

128. Deploying a Full Stack Amazon Clone with Next.js, Tailwind CSS, Zustand, and Nest.js on Aptible

Learn how to deploy an Amazon Clone application on Aptible, a secure and scalable cloud infrastructure platform.

129. What Does "Serverless" Mean?

In the simplest terms, a serverless system is a way to build an application without having to manage the infrastructure. It reduces administration & maintenance

130. Next.JS vs. React: What Should You Use?

React is a tool for building a front end. Next.js serves the same purpose. However, both instruments offer a slightly different set of features.

131. Learn Agent Instructions: Fine-Tuning Autonomous AI Agent Trajectory

Agent Instructions are a set of directives appended into an agent during its provisioning phase.

132. Next.js v15 — What’s new under the hood

The new version is interesting not only for its new functionality, but also for the shift in priorities, the organization and reflection on mistake.

133. Fetch the Right Data With Next.js and React SSR

A frontend developer should be able to define what data is needed for a given page

134. Building Better React & Next.js Apps: Mistakes, Tips, and Best Practices

This guide offers insights and practical tips to improve code reliability and maintainability in React, Next.js, and modern JavaScript applications.

135. Building a Secure Newsletter Subscription with NextJS, Supabase, Nodemailer, and Arcjet 🔐💯

In this tutorial, we will build a custom email subscription app by integrating robust security measures and validation techniques.

136. April Infrastructure Shift Brings May Time On Story Page Lift

Hacker Noon Product Update: Overview of What We Deployed in April 2020

137. Learn How Build a Progressive Web App in Minutes with Next.js

Explore Next.js's new native PWA support to easily create powerful, app-like web experiences with offline caching, push notifications, and seamless updates.

138. Using Webiny Headless CMS With Starter Kits for Gatsby, NextJS

You can spin up a Webiny instance on your own cloud infrastructure in minutes, and use one of our 1-click starters to get build a frontend quickly.

139. Why I Switched To Tailwind For Writing CSS

TailwindCSS is a highly customizable, low-level CSS framework. Here are my reasons why I decided to switch from normal CSS to Tailwind CSS for my work.

140. Building an Efficient Waitlist App with Next.js and Xata

A waitlist application is used by agencies, companies, marketing campaign websites, and many more to collect user data from a website.

141. Taking Advantage of React to Improve User Experience

In this article, we'll discuss some tips on how to create a great user experience with React.

142. How to Create a Web3 Events Marketplace with Next.js, Typescript, and Solidity

By the end of this guide, you'll have a functioning decentralized platform where users can list and participate in events.

143. Next.js Vs. Gatsby: What Is The Best Choice In 2021

Next.js and Gatsby - what their strengths and weaknesses are and which one is the better choice

144. How to Build a Decentralized House Rental Platform with Next.js, Redux, and Solidity

Learn to build a decentralized house rental marketplace on Ethereum.

145. How to Build a Chatbot with Langchain, Next.js, OpenAI, and Supabase

A chatbot system that can be trained with custom data from PDF files.

146. How Astro Made My Portfolio 82% Faster to Build

I moved my portfolio website from Next.js to Astro after three years. Faster builds, less JavaScript, better SEO, and a simpler setup that just works.

147. Creating a RAG chatbot with NextJS, OpenAI & Dewy

This guide will walk you through building a RAG application using NextJS, the OpenAI API, and Dewy as your knowledge base.

148. Implementing Slack Notifications in Your Next Application

Slack notifications are one of the easiest ways to get notified for smaller teams.

149. The Axios Nightmare Is Over: Meet Axios-Fixed

Axios was compromised in a major supply chain attack affecting 100M+ installs. Learn what happened and how to migrate safely to axios-fixed in minutes.

150. Implementing Secure Role-Based Access Control (RBAC) in a Next.js Application Using Permit.io

Learn how to implement secure, scalable Role-Based Access Control (RBAC) in a Next.js app with Permit.io, managing user permissions and enhancing app security.

151. Using Next.js 13’s Bleeding-Edge Features for Data Fetching

The app directory, Streaming, Suspense, and hybrid Server and Client Components were demystified — with a little help from GraphQL + WunderGraph.

152. Our Communication No Longer Belongs to Us

AI could help you create your own private contact room on WhatsApp 1.0.

153. Next.js Authentication Made Easy with Firebase

Set up secure authentication in your Next.js app with Firebase. Follow this step-by-step guide to quickly integrate Google and Email/Password sign-in methods.

154. Building a Production Grade Testnet Faucet With Typescript, Redis and Nextjs

In this tutorial, I will teach you how to build your own faucet be it for your team or personal use.

155. NotionNext: The All-in-One Platform for Building Notion-Powered Websites

NotionNext is an open-source project that allows you to build a website directly from your Notion workspace.

156. JavaScript JS0/JSSugar Proposals, Node.js 23, Next.js 15 RC2 and More - This Week in JS

A look at a controversial proposal about splitting JavaScript, the latest Node.js release, some killer tools, and more.

157. Isomorphic TypeScript APIs are a Gamechanger, Blurring the Line Between Client & Server

Full-Stack development just reached a whole new level of productivity. Isomorphic TypeScript APIs, as I call them, blur the lines between client and server.

158. Building a Medusa WebShop With One Command

In this article, you will get started with Medusa by building your first headless store with a single command.

159. How I Improved My Website Performance Score from 35 to 100

Discover the steps I took to skyrocket my website performance score from 35 to a perfect 100. Learn about leveraging Next.js, optimizing images, choosing the ri

160. 2025 SEO Strategy: Less Copywriting, More Engineering

AI-generated content is changing the SEO game. Learn how a technical, SEO-first PWA architecture is now non-negotiable.

161. Bun just got 60% faster, Doom now runs on TypeScript, and OpenAI launched GPT 4.5 - This Week in JS

This Week in JavaScript includes OpenAI's groundbreaking GPT-4.5 model, Doom running in TypeScript, major Bun updates, and Firefox's privacy controversy,

162. Using Next.js to Effectively Format a Page and Structure Its SEO

Organizing your Next.js application and using its components.

163. How I Made My Next.js Blog Serve Markdown Files for Agent Experience SEO (AX-SEO)

How to serve raw Markdown files in a Next.js blog using middleware and API routes, enabling Agent Experience SEO (AX-SEO).

164. How to Add Reactivity to Your Next.js Blog Using Giscus

Learn how to add A comments & reactions system to your Next.js blog powered by GitHub Discussions using giscus.

165. How to Integrate Next.js with Electron Using React Server Components

Combining Next.js and Electron app to use React Server Components without opening ports or running HTTP server even on localhost.

166. An Intro to Middleware in NextJS 12

NextJS 12 was announced yesterday at the NextJS Conf and they announced a new feature called middleware which allows one to modify the response to a request.

167. Here's Everything We Learned From the React Native Summit

Highlights from the deprecation of Create React App, exciting updates from the React Native Summit, and why ES Modules are becoming the standard in JavaScript.

168. Integrating React Bricks With an External API

n this tutorial, we will walk through the process of fetching a cat image from The Cat API, and rendering it in a React Bricks application.

169. Building the "Spotify Wrapped" of Product Hunt: A 48-Hour Technical Sprint to Map the Maker Economy

I built a cinematic 'Spotify Wrapped' for Product Hunt makers using Next.js. Discover your 2025 global rank and persona before our Dec 27 launch!

170. Comparing The Top React Frameworks

There are many reasons to switch from traditional CRA to the modern framework of React.

171. Building a Logo Creation App with Next.js, Shadcn/ui, and Lucide React

Learn how to build a customizable logo builder app with Next.js, shadcn/ui, html2canvas-pro, and Lucide Icons. Follow our step-by-step guide to create and perso

172. The Evolution of Our Tech Stack: Lessons, Optimizations, And Outlooks

How to build a tech stack if you run an early-stage startup.

173. My Checklist for a Production-Ready Website

There are many aspects to be considered for a production-ready website. Here is my short list of what to look for.

174. How a Small Next.js Routing Change Boosted My Google AdSense Revenue

Why Google AdSense ads silently fail on Next.js sites using client-side navigation—and the simple fix that restored impressions and revenue.

175. WordPress Headless + CPT + ACF: How to Build a Flexible Content Platform

This article will guide you through creating a flexible and dynamic content platform using WordPress as a headless CMS

176. How I Built an Engine That Turns Architecture Sketches Into Animations

Learn how to build a "Magic Move" animation engine for Excalidraw from scratch using Next.js and Framer Motion.

177. Dive into Web3 Contracts with Hardhat and Node.js Vol.3

Crafting Telegram bot-driven NFTs, and delving into Web3 and blockchain tech for creative enthusiasts.

178. Next.js: Firebase Authentication and Middleware for API Routes

Recently I made a small web app that requires user accounts. I learned quite a bit about setting up authentication with Firebase on the client-side and using it on the server-side to protected API routes with a middleware pattern similar to Express.js. This post is a recap of what I learned based on this project for future reference. You can find the code for this project on GitHub here.

179. Authentication Sucks—So This Developer Built a Better Starting Point

Open Source Full-stack clean authentication template with Next.js, NodeJs, ExpressJs. Features email/OTP, OAuth, RBAC, JWT security, and more.

180. Supercharge Your SEO Game: Powered By getStaticProps

This is mainly useful for websites that use React/NextJS with a CMS (Content Management System) integration. No matter, whether it's WordPress, Contentful, Prismic or any other CMS. This concept is highly relevant for companies that require non-engineers to update the content easily. Whether, it's a change in the content, A/B testing or conversion-rate-optimization related. There are many reasons why the content of a website gets updated quite often throughout the year.

181. The Noonification: Newton’s Laws in Society: How Social Forces Move Physical Bodies (4/3/2024)

4/3/2024: Top 5 stories on the HackerNoon homepage!

182. Data Visualization Got Boring, So I Made DataGlass

DataGlass is an AI-powered data visualization tool.

183. What to Consider When Choose an I18n Library for a Next.js 14 Application

What is the best choice, and how does one go about selecting an i18n library for production? Let’s address this decision-making process.

184. This One Script Fixed the “Images Drop In Late” Problem

A boring, repeatable image pipeline for Next.js: cap images at 800px, strip metadata, and auto-pick lossless vs lossy WebP so pages feel complete faster.

185. 8 Valuable Lessons I Learned After My Online Dev Radio Reached 700K+ Listens🙏💖

To celebrate 700K+ listens I decided to write an article where I could take you behind the scenes and share some of the most valuable lessons I've learned.

186. Real Feedback On My Portfolio That May Help You Improve Yours

Some months ago I posted an article about how I built my first personal portfolio. The feedback was pretty awesome and I got some great ideas.

187. Building a Collaborative Whiteboard: Why I Chose HTTP Polling Over WebSockets

This article explains how NodeLand uses a simpler, more pragmatic approach to document synchronization in a collaborative mind-mapping whiteboard.

188. Adding a File Service Plugin to Your Medusa Store: An Essential Guide

This tutorial will help you to learn how to add a file service plugin in order to be able to add products to your Medusa store via the admin dashboard

189. Create Your Own Ethereum NFT Explorer Using NextJS

An NFT Explorer is a Decentralized Application (dApp) that allows users to get information about an NFT collection from the blockchain.

190. The Exciting Journey Of Creating My First Portfolio📂🎉

For the last few months, I've been working on a personal portfolio. I've always believed that a separate portfolio is important for any dev since it connects you to future opportunities and it helps you to grow your network.

191. An Essential Guide to Rendering your Website

Back in the day, rendering a website was simple. You needed a web server that served HTML files. Those were static sites. Then developers started using databases and authentication. To achieve that, they needed to manipulate the HTML file before serving it.

192. Building a Better Experience for Courseware Management

Courseware as Code is a revolutionary approach to streamlining the production of courseware.

193. Save time by Generating Sitemaps Dynamically in NextJS

generate sitemap for next.js under 1 minute

194. Next.js Sitemap Generator Script

Learn how to create your own sitemap generator script for a static Next.js website.

195. The Noonification: Sam Bankman-(Never Getting)Fried (4/4/2024)

4/4/2024: Top 5 stories on the HackerNoon homepage!

196. Why Learn Any Other Programming Language When You Can Learn Typescript?

Use TypeScript in all your projects and all use cases without any limitation. You can now do frontend, backend, infrastructure and machine learning in one progr

197. How We Built This: A Platform for Crowdsourced Design Patterns

Built with Next, Apollo and MongoDB and deployed with GitHub Actions and Docker.

198. New Template Offers Minimal Setup to Get React Working

The initialized project is designed for client-side applications exclusively.

199. How to Share Serializable Data Between React Components in Next.js

This article demonstrates how you can share any serializable data between React components.

200. 🌟 Introducing Universal Image Component: The Ultimate React/NextJS Image Solution!

Universal Image Component is the Ultimate React/NextJS Image Solution. It offers a range of modes to suit your needs. From Base64 conversion to CDN optimization

201. Making A Browser Console Log Wait Until Page Reloads [A How-To Guide]

Ever wanted to create a browser console log that persists after a page reloads? Sure, that isn’t a problem if you enable the “preserve log” option in your developer console, but hear me out.

202. Meet the Writer: HackerNoon's Contributor Leandro, Software Engineer

An interview with Leandro Nuñez, HackerNoon contributor, technical writer and software engineer.

203. An Overview of Next.js Router

These tips and tricks for you on the Next.js router help you make your DX better and code cleaner

204. How Build a Fully Typed Web App Using Next.js, PlanetScale, Drizzle, and Kysely

Harness the power of PlanetScale, Drizzle ORM, and Kysely Query Builder to develop a scalable fully-typed web app.

205. The HackerNoon Newsletter: AI Race With China Risks Undermining Western Values (7/17/2025)

7/17/2025: Top 5 stories on the HackerNoon homepage!

206. Stop Guessing Prices: A Dev’s Guide to Smarter Currency Handling in Next.js

NextJs pricing page for Postly and Onu is built with detection, normalization, multi-provider FX, caching, and a tiny Switch Currency UI.

207. The HackerNoon Newsletter: Our Communication No Longer Belongs to Us (8/4/2025)

8/4/2025: Top 5 stories on the HackerNoon homepage!

208. Casing Can Break Netlify Functions: Here's How

It may not be apparent when you're working on it locally, but quirks such as this one on Netlify can throw a wrench into your application deployed in prod.

209. Inside Dograh: The Architecture Behind an Open Voice AI Stack

A candid walkthrough of Dograh, the self-hostable voice AI platform built for developers who want full control, tracing, and no platform fees.

210. An Overview of our PH Launch for AskMakers v2.0

Oh…I am so sleepy…because I launched AskMakers 2.0 on Product Hunt and I have been monitoring it almost without sleeping😪

211. The Noonification: The Girl an Inch Tall (8/10/2023)

8/10/2023: Top 5 stories on the Hackernoon homepage!

Thank you for checking out the 211 most read blog posts about Nextjs on HackerNoon.

Visit the /Learn Repo to find the most read blog posts about any technology.