Next.js

Introduction

• NextJS Tutorial - All 12 Concepts You Need to Know • ByteGrad 📺
• Next js Tutorial for Beginners | Nextjs 13 (App Router) with TypeScript • Programming with Mosh 📺
• Next.js App Router: Routing, Data Fetching, Caching • Lee Robinson 📺
• Next.js in 100 Seconds // Plus Full Beginner’s Tutorial • Fireship 📺
• 10 Next.js Tips You Might Not Know! • Lee Robinson 📺

General

• Next.js 14 • Overview of new features • Next.js 📖

App Router

• From Pages to the App Directory in Next.js 13 (Nested Layouts) • Nice example of converting a Next app built with the /pages router to use nested layouts and the /app router • Sam Selikoff 📺
• Why React Server Components Are Breaking Builds to Win Tomorrow • Builder.io 📖

Data fetching

• Why I don’t use React-Query and tRPC anymore • A comparison of data loading features in React when using useEffect (no caching) vs react-query (includes caching; choose if using React directly, e.g. via Vite) vs server components in Next 13+ (preferable if using Next) • ByteGrad 📺
  • No need to use useEffect to fetch data anymore (server components can do that more simply)
  • Also no need to use react-query to cache fetched data anymore (server components in next can do that)
  • No need to use tRPC to define api call/response types (server actions can do that)
• Improving developer and user experience with nested layouts in Next.js • Demo of Next 13’s ability to fetch component data on the server using use • Sam Selikoff 📺
• I Fixed Next.js Server Actions • How to use Next 13’s server actions to handle client-side form submissions securely, including validating the form input with zod (via zact) • Theo 📺
• Loading UI with Next.js 13 and React Suspense • Using a loading file to render a loading UI instantly while the server responds to a request • Sam Selikoff 📺
• Next.js Server Actions… 5 awesome things you can do • How to read/write to a DB from a component file using Next server actions and the React useTransition and useOptimistic hooks • Beyond Fireship 📺
• Fetch props directly from the Database?!?! New Hooks in Next.js 9.3! • 25 minute video showing how to fetch data directly from a database (as opposed to an API) in Next.js • Leigh Halliday 📺

Streaming

• How streaming impacts React and Next.js applications • Lee Robinson 📺
• Introducing AI SDK 3.0 with Generative UI support – Vercel • Vercel 🛠️
• Next.js AI Chatbot • Vercel 🛠️
• Vercel AI SDK • Vercel 🛠️
• NextJS’s Amazing New Streaming Server Actions • Jack Herrington 📖

Backend use cases

• Using Next.js The Wrong Way • Examples of the convenience of using Next’s middleware and API endpoint capabilities for backend-only use cases • Theo 📺

Loading Third-Party Resources

• Optimizing Third-Party Loading in Next.js • Introducing @next/third-parties as a wrapper around the Script component, along with the research that led to it • Houssein Djirdeh 📺
• For most things, use the Script component
• Use partytown?

Hybrid CSR, SSR, SSG and ISG

• CSR, SSR, and SSG on NextJS • How to build an example Pokemon directory with each approach • Blue Collar Coder 📺
• Cache for Commerce Performance and Optimization for High Volume Sales • How to use the stale-while-revalidate caching pattern and customize the CDN and data fetching caching rukes for each page type based on how often its content is likely to change • Lauro Arujo 📺
• Responsive Rendering with Next.js • How to swap between the mobile, desktop and SEO-only version of a component by combining SSG, SSR, useragent detection and dynamic imports • Armando Gonzalez 📺

Image optimization

• Getting Lean with the Next.js Image Component • How to reduce image file size by using next/image instead of a vanilla <img> • Sam Selikoff 📺
• Next.js 10’s New Image Component • How to automatically optimize a website’s images using next/image and how it compares to other cloud-based solutions • Leigh Halliday 📺

Search Engine Optimization

• Mastering the basics of SEO in React and Next.js • How to use next/head to insert global and page-specific SEO meta tags • Leigh Halliday 📺

Authentication

• NextAuth?
• Kinde?

Vercel

• Vercel CLI & APIs • CLI, REST API, build output API • Vercel 📚
  • Detect regressions and instantly rollback with the Vercel CLI • Lee Robinson 📺
• Vercel Infrastructure • Edge network, edge middleware, edge cache, data cache, cron jobs, functions, image optimization, ISR • Vercel 📚
• Vercel Platform • Domains, dashboard, integrations, limits, errors, production checklist, private registry • Vercel 📚
• Vercel Storage • KV, Postgres, Blob, Edge Config • Vercel 📚
• Vercel Frontend Observability • Runtime logs, web analytics, speed insights, monitoring, activity and audit logs, log drains, OpenTelemetry (OTEL) collector • Vercel 📚
• Vercel Security • Compliance, firewall, access control, SAML SSO, SSL, secure compute, private deployments • Vercel 📚

Inbox

• Docs Theme – Nextra

• 60SecondDev // Perhaps the most underrated NextJS 15 feature • Create a new project with the —empty flag so you don’t have to delete anything and can just start adding • basarat 📺