Best of Next.js — 2024
- 1
- 2
Community Picks·2y
How I Use ChatGPT as a Frontend Developer (5 Ways)
A frontend developer shares five ways to use ChatGPT for optimizing workflow, including formatting JSON, creating UI skeletons, generating random data, working with regular expressions, and finding code solutions. By leveraging ChatGPT, tasks such as creating Material UI skeletons or finding regex solutions become more efficient, saving time and enhancing productivity.
- 3
Glass: an AI copilot for React and Next.js developers.
Glass provides an AI-powered assistant for React and Next.js developers, enabling them to create components, modify props, and write Tailwind CSS directly from the browser. It also allows developers to visualize component structures by hovering over elements and instantly jump to the source code of the selected element.
- 4
Robin Wieruch·1y
React Tech Stack [2025]
Discover a comprehensive React tech stack for full-stack applications in 2025. Key components include Next.js for its powerful features, optional use of Astro for landing pages, Tailwind CSS for rapid styling, Shadcn UI for UI management, and various tools for data fetching, state management, authentication, and more. The stack is based on extensive research and practical experience from developing a profitable SaaS application.
- 5
- 6
Next.js Full-Stack Web App (2024)
The post introduces a Next.js full-stack starter template tailored for Next.js 14, designed to streamline the setup process for creating modern web applications. It includes features like a scalable project structure, TypeScript support, pre-configured Ant Design components, SASS module styling, social authentication, route guarding, sample APIs with MongoDB integration, and custom alias imports. Detailed setup instructions are available in the GitHub repository linked in the post.
- 7
Get the Best Performance on Your Next.js App
Learn how to optimize performance on your Next.js app with tips like loading only the necessary JavaScript and CSS, lazy loading dependencies, using the Next.js Image component for image optimization, preferring CSS over JavaScript, avoiding loaders at the beginning, utilizing font optimization, optimizing scripts, removing unused packages, checking bundle size, and using server components for improved rendering and caching.
- 8
Dev Squad·2y
Ground. your animation kit
Animations have become easier to create with modern tools. This post introduces a set of handcrafted animated components built using Next.js, React, TailwindCSS, and Framer Motion, including elements like carousels, cards, and inputs. Check out Framer Ground for more examples.
- 9
Top Next.js Tools for Next-Gen Developers
Next.js is a powerful React framework ideal for building performance and SEO-friendly web applications. This post highlights essential tools for developers to enhance productivity, including those for SEO, authentication, data management, UI component testing, and styling. Key tools such as NextAuth.js, Prisma, Tailwind CSS, Storybook, Jest, and Cypress are covered to help streamline development and ensure high-quality applications.
- 10
Implement Clean Architecture in Next.js
Clean architecture, a concept developed by Robert Martin, integrates various software architectures like hexagonal, onion, and others into a cohesive framework. It focuses on ensuring that the business logic of an application remains independent of frameworks, UI, databases, and external agencies. The post discusses implementing clean architecture in a Next.js application, highlighting the importance of separating different concerns through layers. It explains how to structure code to make applications more testable and maintainable. Key aspects include dependency injection, unit testing, and the interaction between different architectural layers.
- 11
Next.js·2y
Next.js 15 RC
Next.js 15 RC is now available, allowing you to test the latest features before the stable release. It includes support for React 19 RC, caching updates, incremental adoption of Partial Prerendering, executing code after a response, create-next-app updates, and optimizing bundling of external packages.
- 12
React is a Full-Stack Framework
React has evolved into a full-stack framework with the introduction of Server Components and Server Actions, allowing for seamless integration between frontend and backend. This paradigm shift has created an environment where TypeScript has become the industry standard, and tools like tRPC make calling backend functions more efficient. While initially popular as a frontend framework, React's new capabilities, especially as implemented in Next.js, empower developers to directly access server-side resources. This marks the beginning of a new era of full-stack development where React developers can implement features across the entire stack, from UI to database.
- 13
Build an Invoice App with Next.js 15
Learn to build a full stack invoice app using Next.js 15, TypeScript, Tailwind, and Shaden components. The app will allow invoice creation, payment processing through Stripe, and email notifications via Resend. It leverages new React 19 APIs and uses Drizzle ORM to manage Postgres data. The app includes social login, multi-factor authentication through Clerk, and is deployed on Vercel.
- 14
How to Set Up Next.js 15 for Production in 2024
This tutorial guides you through setting up Next.js 15 for production in 2024, focusing on key steps and tools such as creating a new project with TypeScript and Tailwind CSS, configuring ESLint and Prettier for code quality, setting up TypeScript type checks, and integrating testing frameworks Vitest and Playwright. It also covers organizing project folders for scalability, adding i18n support, using Prisma with Postgres for database management, implementing facades for database interactions, deploying with Vercel Postgres, and setting up continuous integration and delivery using GitHub Actions.
- 15
- 16
maybe-finance/maybe: Personal finance and wealth management app
Maybe is an open-source personal finance app with features like net worth tracking, financial account syncing, investment benchmarking, and more. It is built using a tech stack including Next.js, Tailwind, Node.js, and Postgres.
- 17
freeCodeCamp·2y
How to Optimize Next.js App Performance With Lazy Loading
Learn how to optimize Next.js app performance by implementing lazy loading techniques for client components. By deferring the load of client components and imported libraries until needed, initial load times can be significantly improved. The post covers techniques using `next/dynamic` and `React.lazy()` with `Suspense`, along with handling lazy loading for named exports and considerations for server components.
- 18
Mobile App Development Course with React Native, Supabase, Next.js
Learn to build a complete e-commerce mobile app with React Native, Supabase, Stripe, and Next.js through a comprehensive freeCodeCamp course. The course covers front-end design, secure back-end setup, payment integration, and deployment, making it ideal for full-stack developers aiming to enhance their skills.
- 19
Web Dev Simplified·2y
Build a Full Stack Next.js App with Google Calendar - TypeScript, Drizzle, ShadCN, Tailwind
Learn how to build a modern full-stack application using Next.js, TypeScript, Drizzle, ShadCN, and Tailwind CSS. The tutorial covers setting up a clone of Calendly that integrates with Google Calendar, allowing users to schedule events based on availability. The steps include user authentication using Clerk, database setup with Postgres and Neon, and utilizing Tailwind CSS for styling.
- 20
Zustand in Next.js 14 (with ts)
Learn how to use Zustand, a simple and scalable state management solution, in a Next.js project with TypeScript. The post guides you through setting up a new project, integrating Zustand, and creating a state store. It also covers adding actions to manage the state and persisting state data using localStorage.
- 21
LogRocket·2y
Next.js View Transitions API
User expectations for seamless web application experiences have led to the development of the View Transitions API. This API enhances navigation, providing smooth and fluid transitions between views in both single-page (SPA) and multi-page apps (MPA). Implementing transitions is simplified with the next-view-transitions library, which integrates smoothly with Next.js. The post outlines how to set up a Next.js project, install the library, and build components to showcase transitions, highlighting the ease of use, performance optimization, and consistency of using the library compared to manual implementation.
- 22
Next.js 14.2
Next.js 14.2 includes development, production, and caching improvements. It introduces Turbopack for Development, which significantly improves local development performance. There are also enhancements in build memory usage, CSS optimization, caching, and error DX. The release prepares for the integration of React 19 and includes other improvements and documentation updates.
- 23
Build & Deploy a Full Stack Dating App
Learn to build and deploy a modern, full-stack dating app using cutting-edge tools and frameworks such as Next.js, Prisma, NextAuth, Cloudinary, and Pusher. This comprehensive course, available on freeCodeCamp's YouTube channel, covers everything from setting up your project to implementing advanced features like real-time messaging, OAuth integration, and role-based access. Perfect for developers looking to showcase their portfolio or expand their expertise in modern web development.
- 24
MDN Blog·2y
Fixing your website's JavaScript performance
Web performance can be hit hard by JavaScript issues like long tasks, large bundle sizes, and hydration. Long tasks lock the main thread, blocking user interactions; large bundles slow down download, parse, and execution times; and hydration can delay interactivity in server-rendered pages. Strategies to address these include breaking up JavaScript work, using Web Workers, implementing tree shaking, code splitting, lazy loading, and considering alternatives to popular JavaScript frameworks that may improve performance.
- 25
