freeCodeCamp·1yHow to Build an Analytical Dashboard with Next.js
The post provides a comprehensive guide to building an analytical dashboard using Next.js, Flexmonster, and Highcharts. It includes step-by-step instructions on configuring these tools, creating charts, and setting up a functional user interface. Additionally, it explores real-world survey data on passenger flying etiquette to demonstrate the dashboard's capabilities.
Tiger's Place·1yMaking Next.js Apps Faster: A Practical Performance Guide Beyond Next.js
This post provides a comprehensive guide on optimizing the performance of Next.js applications. It covers the fundamentals of web performance, such as understanding client and server bundles, JavaScript execution in the browser, and techniques for identifying performance issues using tools like PageSpeed Insights and Chrome DevTools. The post offers practical strategies to make your app faster, including the use of server components, code splitting, dynamic imports, handling large dependencies, and prefetching/preloading techniques. The aim is to equip developers with the knowledge to significantly improve both perceived and actual performance of their Next.js apps.
Dev Squad·1yTerminal UI Inspired Portfolio
A developer created a unique terminal-themed portfolio using Next.js and Tailwind CSS, featuring a command box where users can type 'help' to learn more about them. The portfolio includes a theme toggle with various developer-inspired themes for customization.
Community Picks·1yBuilding a Telegram Clone with Next.js and TailwindCSS - Part One
This guide details how to build a Telegram Web clone using Next.js, TailwindCSS, and Stream SDKs. It covers setting up the project, implementing user authentication with Clerk, and creating the app's initial layout. The series will continue to add real-time messaging and video/audio call features in later parts.
Fly.io·1yUsing web sockets on Next.js | NO third party solution
Learn how to implement WebSockets in a Next.js application without using third-party services by leveraging traditional servers on Fly.io. The post explains the setup and configuration required to create a custom server for handling WebSocket connections, illustrated with a simple chat application example.
Community Picks·1ySSG vs SSR in Next.js 15!
Next.js 15 makes server-side rendering the default, treating all components as Server Components unless specified otherwise with 'use client' for Client Components. SSG (Static Site Generation) provides high speed, security, and SEO benefits for static content, while SSR (Server-Side Rendering) offers dynamic content and personalization advantages. The choice between SSG and SSR depends on whether the site content is static or frequently updated.
Codrops·1yNim is a free and open-source personal website template built with Next.js 15, React 19 and Motion-Primitives.
Nim is a free, open-source personal website template built with Next.js 15, React 19, Tailwind CSS v4, and Motion-Primitives. It offers customizable, pre-built motion components to simplify adding animations to websites. Designed for developers, designers, and founders, Nim is easy to customize, featuring a blog powered by MDX and various animated elements.
Tiger's Place·1yServer and Client Component Patterns in Next.js
Learn when to use server and client components in Next.js. Understand the benefits of each type, like data fetching and access to backend resources for server components, and adding interactivity and using browser APIs for client components. Discover patterns, such as sharing data between components, preventing server code in client bundles, using third-party components, and employing context providers. Also, get insights on optimizing component placement for reducing JavaScript load on the browser.
Tiger's Place·1yHow caching works in Next.js
Next.js uses four caching systems to optimize performance: Request Memoization, Data Cache, Full Route Cache, and Router Cache. Request Memoization prevents duplicate data fetches during rendering. Data Cache stores fetched results on the server for reuse across requests, with configurable revalidation. Full Route Cache saves entire pre-rendered pages for quick loading, while Router Cache allows fast navigation between visited pages during a session. These caches work together to create a comprehensive caching strategy, enhancing speed and efficiency.
Tiger's Place·1yImage Component in Next.js
The Next.js Image component enhances the HTML `<img>` element by automating image optimization, preventing layout shifts, enabling lazy loading, and allowing on-demand resizing for both local and remote images. Developers can manage images efficiently with properties like `priority` for critical images and configurations in `next.config.js`.
Tiger's Place·1yI like the future of Next.js
Next.js is introducing new features such as a granular cache system and `use cache` that can be implemented at various levels including file, component, and function-level caching. The system supports smart caching with cache tags, custom cache profiles, and cache keys for better development experience. These enhancements are part of an effort to improve caching mechanisms, enabling easier invalidation and better performance.
NextJS·1yPathfinder: A Modern Mapping App with Next.js 15 and MapboxGL
Pathfinder is an open-source mapping application built with Next.js 15, MapboxGL, and TypeScript. It features real-time weather data, 3D building visualization, dark/light mode support, a street/satellite toggle, and a fully responsive design.
LogRocket·1yStackAuth: An open source Auth0 alternative
StackAuth is an open-source authentication solution designed to offer a cost-effective and customizable alternative to Auth0. It supports various authentication methods, including email/password logins and third-party OAuth providers, allowing developers to maintain control over their authentication systems while adhering to modern security standards. This guide details configuring StackAuth in a Next.js app and demonstrates setting it up for both development and production environments.
Community Picks·1yUltimate Next 15 Course: Build a YouTube Clone (2025)
Antonio's comprehensive course details creating a YouTube clone using modern web technologies, including Next.js 15, React 19, TRPC, Postgres, and AI tools. The app features essential video player interactions, user engagement through likes, comments, playlists, and creator tools for video processing, thumbnail management, and AI-generated titles/descriptions. The tutorial spans 38 chapters and over 24 hours, covering advanced topics such as server-side data prefetching and database management. Antonio introduces a whiteboard summary approach for clarity on chapter goals.
Tiger's Place·1yScripts in Next.js
Scripts can slow down page load, with different scripts requiring different loading priorities. Key strategies for loading scripts in Next.js include beforeInteractive for critical scripts, afterInteractive for analytics and tag managers, lazyOnload for low-priority scripts, and the experimental worker strategy that offloads scripts to a web worker to keep the main thread free and improve performance metrics.
Tinybird·1yBuild a Datadog alternative in 5 minutes
A free Next.js app and Tinybird backend can be deployed in less than 5 minutes as a simple Datadog alternative for log analytics. This guide covers the stack, development workflow, instrumentation, data handling, and API setup. A focus is placed on building a basic, functional version to iterate quickly, with optimizations for scale coming later. Detailed instructions provide insight into using mock data for testing, integrating APIs with Next.js, and deploying using CI/CD processes.
Fullstack Developer·1yMulti-Image Uploader for Next.js | Shadcn/ui | Zod
Discover a compact, responsive file uploader for Next.js, built with shadcn/ui. It supports any file type, custom file limits, live previews, animations for deletions, is type-safe with Zod and React Hook Form, and is cloud-ready for S3/R2 via signed URLs. It's perfect for all screen sizes.
ByteGrad·1yVideo Upload In React & Next.js Is Easy Now (+ Progress Bar, Custom Button, ImageKit)
Learn how to upload videos in React and Next.js using a custom upload button with ImageKit. The guide covers creating a progress indicator, ensuring secure client-side uploads, and displaying the uploaded videos. It showcases ImageKit's features for video transformation, including resizing, watermarking, and adaptive bit rate streaming.
All ShadCN·1yBeautiful Shadcn UI Landing Page
A modern, responsive landing page template created using Next.js, Tailwind CSS, Shadcn UI, and Shadcn UI Blocks. The template features a clean design, full responsiveness, and dark mode support. It includes detailed customization options to adapt the template to individual needs.
YouTube·1y🔴 Let's build a Course Platform LMS with Admin Dashboard! (NEXT.JS 15, Sanity, Stripe, Clerk, TS)
Build a comprehensive LMS platform with Next.js 15, featuring a dynamic admin dashboard. The project incorporates Sanity for content management, Stripe for payment processing, and Clerk for user authentication. Key features include dynamic loaders, real-time data updates, customizable dashboards, and advanced search functionality—all wrapped in a clean, responsive design with light and dark modes.
freeCodeCamp·1yStrapi 5 and Next.js 15 Full Stack Project Course
Master modern web development by building a fully functional summer camp website using Next.js 15 and Strapi 5. Through hands-on practice, you'll learn to combine Next.js's server components with Strapi's headless CMS capabilities to create dynamic, content-rich websites. This course is ideal for beginners or anyone seeking to streamline their development process with a powerful tech stack. The tutorial covers setting up Next.js, creating content types in Strapi, integrating Figma designs, and dynamically managing website content.
Community Picks·1yNextJs Full Stack Wireframe to Code App Using React, Tailwindcss, Typescript | Openrouter.ai
Learn how to build a full-stack application that converts wireframes to React code using Next.js, TailwindCSS, TypeScript, and Firebase. This tutorial demonstrates setting up user authentication with Google, uploading wireframe images, integrating AI models for code generation, and managing data with Drizzle ORM and Firebase storage.
Next.js·1yNext.js 15.2
Next.js 15.2 introduces significant updates including a redesigned error UI for enhanced debugging, streaming metadata to improve page rendering, and performance improvements for Turbopack. Additionally, it provides experimental support for React's View Transitions API and Node.js Middleware. A new dev indicator consolidates development information, and users can enable these features and start new projects or upgrade existing ones using provided commands.
Product Hunt·1yFlags SDK by Vercel - Free, open-source library for using feature flags in Next.js
Vercel has released the Flags SDK, a free and open-source library designed to integrate feature flags into Next.js applications. This tool enables developers to manage and deploy features efficiently, offering better control over the rollout of new updates and experiments.