Best of Next.js — November 2024

  1. 1
    Article
    Avatar of communityCommunity Picks·1y

    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.

  2. 2
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    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.

  3. 3
    Video
    Avatar of communityCommunity Picks·1y

    SEO in Next.js - The Ultimate Guide (Metadata, Sitemap, Robots, Google Search Console, Caching)

    This comprehensive guide covers everything you need to optimize your Next.js website for search engines. You will learn how to set static and dynamic metadata, create sitemaps and robots.txt files, configure caching for fast page loads, and connect your website to Google Search Console. The tutorial also includes tips for dynamically generating Open Graph images and using server and client components effectively.

  4. 4
    Article
    Avatar of communityCommunity Picks·2y

    How I Built My Portfolio

    Building a high-quality portfolio website goes beyond simple HTML and CSS. Utilizing an advanced tech stack like Next.js, Tailwind CSS, Shadcn UI, and Vercel can transform your static portfolio into a dynamic, professional site. The post explores the reasons for over-engineering, such as creating a better user experience, making your site scalable, and demonstrating a commitment to quality. It also highlights specific advantages of Next.js, like built-in SEO support, optimized image handling with the `next/image` component, and Partial Pre-rendering for combining static and dynamic content.

  5. 5
    Article
    Avatar of devsquadDev Squad·1y

    Quickly Find Resources for Awesome Next.js

    Explore a curated list of resources related to Next.js divided into 11 categories. These include starters/boilerplates, AI projects, SaaS templates, tools, blog templates, e-commerce projects, and landing page templates.

  6. 6
    Article
    Avatar of thisdotThis Dot·2y

    Build Facial Recognition and Chatbot AIs using TypeScript with Jack Herrington

    Learn how to build a voice-activated AI assistant using OpenAI's Whisper and TTS models combined with Meta's Llama 3.1, integrated within a Next.js application. The guide covers setting up the client-side using Next.js, recording and sending audio for processing, and handling voice responses. The backend setup includes using OpenAI SDK and Vercel AI SDK for processing audio and generating responses.

  7. 7
    Video
    Avatar of wdsWeb Dev Simplified·2y

    How To Handle Permissions Like A Senior Dev

    The post discusses how to handle permissions in applications effectively, moving beyond basic role checks. It covers different permission systems from simple to complex, including role-based access control (RBAC) and attribute-based access control (ABAC), and demonstrates their implementation through code examples and diagrams. The post also explains how to integrate these systems with the authentication service, Clerk, simplifying user role and permission management.

  8. 8
    Video
    Avatar of joshtriedcodingJosh tried coding·2y

    I Found a Faster Way to Build Next.js APIs

    Discover a method for deploying Next.js APIs in a highly performant and cost-effective manner by utilizing Cloudflare Workers. This approach benchmarks different setups to highlight the significance of API deployment region, minimal dependencies per request, and lightweight runtimes. A comparison between a simple Cloudflare Worker, a custom architecture, and Vercel Edge Functions reveals considerable performance improvements.

  9. 9
    Video
    Avatar of youtubeYouTube·1y

    🔴 Let's build a Full Stack E-Commerce App with NEXT.JS 15 (Sanity, Stripe, Clerk, Tailwind, TS)

    The post demonstrates building a full stack e-commerce application using Next.js 15, Sanity, Stripe, Clerk, Tailwind, and TypeScript. It highlights the new features of Next.js 15 and Sanity's powerful live content capabilities, which allow real-time updates and a visual editor for live modifications. The tutorial integrates Stripe for payment processing and Clerk for authentication, showcasing modern web development techniques and tools. The build includes functionalities like fast responsive design, basket processing, search, categories, and a full CMS backend with inventory management.

  10. 10
    Article
    Avatar of logrocketLogRocket·1y

    Drizzle vs. Prisma: Which ORM is best for your project?

    Drizzle and Prisma are two popular ORMs used for data access and migrations. Prisma offers a high level of abstraction, simplifying data interactions and auto-generating queries, making it suitable for developers prioritizing speed and productivity. However, this comes at the cost of less control over SQL queries. Drizzle provides a more SQL-first approach, giving developers granular control and precise query execution, but requires more manual handling and SQL knowledge. Both ORMs support TypeScript integration and have different approaches towards migrations and validation, with Prisma being more automated and Drizzle favoring manual control.

  11. 11
    Video
    Avatar of youtubeYouTube·1y

    Full Stack NextJs Course : AI Note Taking App Using React, Tailwind css | SaaS App

    Learn to build a full-stack AI PDF note-taking application using React and Next.js from scratch. This tutorial covers using AI to generate answers from PDF content, building a feature-rich interface with React and Tailwind CSS, implementing authentication with Clerk, real-time database with Convex, and deploying the application. Users will be able to upload PDFs, ask questions, and take notes efficiently with AI assistance. The guide also includes options for upgrading to a paid plan with payment integration.

  12. 12
    Video
    Avatar of davegrayDave Gray·1y

    Permissions & Authorization in a Next.js Full Stack Project

    Dave provides a lesson on applying permissions in a Next.js full stack application. He explains how to set up permissions for users, employees, managers, and admins, emphasizing the importance of restricting access based on roles. The tutorial includes integration with Sentry for error reporting and performance monitoring. Detailed walkthroughs guide users through installing required packages, setting up Kind for user management, and configuring permissions using Kind's management API. The tutorial also addresses compatibility issues with using Next.js 15 and React 19.

  13. 13
    Article
    Avatar of devtoDEV·1y

    Ollama-OCR for High-Precision OCR with Ollama

    Llama 3.2-Vision is a highly capable multimodal large language model for text and image inputs, excelling in visual recognition and image reasoning. This guide explains how to implement OCR functionality using Ollama-OCR with Llama 3.2-Vision. Key features include high accuracy text recognition, support for multiple image formats, and customizable prompts. The guide also outlines the steps to install Ollama and the Llama 3.2-Vision model.

  14. 14
    Video
    Avatar of bytegradByteGrad·1y

    Next.js Will Never Be The Same After This

  15. 15
    Video
    Avatar of t3dotggTheo - t3․gg·2y

    Making The Fastest Website Even Faster (With Next.js)

    McMaster's website is renowned for its speed, achieved through innovative prefetching and client-side JavaScript techniques, despite using older web technologies. A recent rewrite of the website using Next.js has made it even faster, showcasing the power of Next.js optimization techniques, including preloading strategies and efficient image handling. Key performance insights demonstrate that optimizing user experience isn't solely about the framework but understanding and addressing the needs and expectations of users.

  16. 16
    Article
    Avatar of collectionsCollections·1y

    Master Event-Driven Architecture by Building a SaaS Application with Next.js, Clerk, and NeonDB

    Learn to build scalable SaaS applications using Next.js, Clerk, and NeonDB with a focus on event-driven architecture. This course covers essential topics such as SaaS starter templates, database management with NeonDB, custom authentication and role-based access control using Clerk, handling webhooks, and integrating APIs. Gain practical experience through hands-on exercises to apply your knowledge in real-world projects.

  17. 17
    Article
    Avatar of codailydevCodaily.dev·1y

    Integrating Google AdSense with Next.js 14+ for Revenue Generation

    Learn how to integrate Google AdSense with Next.js 14+ to generate revenue from your website. This guide provides a comprehensive step-by-step approach to setting up and optimizing AdSense on your Next.js application.

  18. 18
    Article
    Avatar of collectionsCollections·2y

    Build and Deploy Your Own RAG Chatbot with JavaScript

    Learn to build and deploy a Retrieval Augmented Generation (RAG) chatbot using JavaScript, LangChain.js, Next.js, Vercel, and OpenAI through a 90-minute YouTube course by Ania Kubow on the freeCodeCamp.org channel. The course covers everything from integrating a vector database with DataStax, deploying to Vercel, and using a practical Formula 1 chatbot example for real-time data fetching. It's suitable for both beginners and experienced developers aiming to enhance their skill set.

  19. 19
    Article
    Avatar of communityCommunity Picks·2y

    A better Next.js? • Nue 1.0 (RC) is out

    Nue 1.0 (RC) introduces a static site generator focused on faster tooling, cleaner codebases, and superior performance compared to Next.js. Notable features include an advanced Markdown parser, hot-reloading mechanism, and a design engineering approach that reduces reliance on JavaScript. The update offers significant improvements such as custom syntaxes, variables and expressions in documents, and interactive elements, all while maintaining exceptional speeds and lightweight output.

  20. 20
    Video
    Avatar of joshtriedcodingJosh tried coding·2y

    My Favorite Open-Source Next.js Project for 2024

    A deep dive into an open-source Next.js project that showcases techniques for extreme website speed and performance. The project utilizes partial pre-rendering, aggressive prefetching, and aggressive caching, among other strategies, to achieve nearly instant navigation and image loading. The author explains how these methods can be implemented in other projects, highlighting the trade-offs involved, such as increased infrastructure load and limitations on dynamic content.

  21. 21
    Article
    Avatar of freecodecampfreeCodeCamp·1y

    How to Handle Forms in Next.js with Server Actions and Zod for Validation

    Learn how to handle forms in Next.js using server actions and Zod for validation. This tutorial covers creating server actions, setting up form validation using Zod schemas, building a contact form component, and integrating server actions for secure form processing. The guide focuses on validating form data server-side to ensure consistency and security without exposing sensitive information to clients.

  22. 22
    Article
    Avatar of collectionsCollections·1y

    Creating Type-Safe and Developer-Friendly Forms with React Hook Form, Zod, and ShadCN in a Next.js Full Stack Project

    Learn to build adaptable and developer-friendly forms using React Hook Form, Zod, and ShadCN in a Next.js full-stack project. This tutorial covers setting up forms for user dashboards, employing robust form validation, and managing form state. Examples include CRUD operations with a Wasp template using TypeScript, client-side validation for immediate user feedback, and integrating Zod with React Hook Form for type-safe forms.

  23. 23
    Article
    Avatar of newstackThe New Stack·2y

    Vercel Makes Changes to Next.js To Simplify Self-Hosting

    Vercel has made significant updates to Next.js to simplify self-hosting. This includes new documentation and video resources explaining self-hosting steps, improvements to the cache API with the introduction of 'use cache', and replacing the WebAssembly-based image optimization library with Sharp. These changes aim to make Next.js more efficient and easier to configure, ultimately enhancing developers' ability to self-host applications.

  24. 24
    Video
    Avatar of beyondfireshipBeyond Fireship·1y

    Is Next.js 15 any good? "use cache" API first look

    Next.js 15 introduces several new features including an automated code migration tool, a fast Turbo Pack development server, and a new API for running code in the background. The most significant change is an overhaul of the caching system, making it more intuitive and allowing developers to control caching behavior on a per-function basis. The new 'Dynamic IO' API simplifies code and makes caching explicit. Users can define caching strategies, manage cache expiration, and invalidate cache on-demand, enhancing performance and practicality for complex applications.

  25. 25
    Article
    Avatar of communityCommunity Picks·1y

    Building a Kanban Board with Next.js,Vercel AI and Tolgee

    Learn to build a real-time Kanban board in Next.js, using WebSockets for live updates, Vercel AI SDK for AI support, and Tolgee for localization. The guide covers setting up a WebSocket server, configuring authentication with NextAuth, and managing a PostgreSQL database with Docker. It also includes integrating and handling localization in your app.

See all Next.js archives