Next.js

Server Side Rendering, Static Site Generation, app framework

yarn create next-app --ts  # recommended
npx create-next-app --example api-routes --use-npm

npx dev
npx build && npx start  # local deployment with app server
npx build && npx export -o build/ # static HTML (SSG) without need of app server

Next.js in 100 Seconds // Plus Full Beginner's Tutorial - YouTube
Next.js Architecture for Common Solutions | Chris Hannaby - YouTube
Next.js Tutorials - YouTube Colby Fayock
Next.js 101: What Features You Should Know About
Next.js from the Ground Up - Jamstack Explorers
Next.js Crash Course for Beginners 2021 - Learn NextJS from Scratch in this 100% Free Tutorial! - YouTube
Tag Archive nextjs
How To Build Backends-for-Frontends in NextJS | JavaScript in Plain English

Next step after Node.js: Framework for 'universal' JavaScript apps | InfoWorld
We migrated to Next.js to serve our home page 7.5× faster
Building CRUD Apps with NextJs FaunaDB
How To Maintain A Large Next.js Application — Smashing Magazine
Hacker News client with Chakra UI and Next.js - LogRocket Blog
JAMstack Origins: A deep dive into the architecture with Next.js | by LiftOff LLC | Medium

Next.js vs Gatsby vs create-react-app
How to install Next.js
Linking two pages in Next.js using Link
Dynamic content in Next.js with the router

Next.js Trash Course - Part 1/3 - DEV Community
Next.js Trash Course - Part 2/3 - DEV Community
Next.js Trash Course - Part 3/3 - DEV Community

How to Start ReactJS Development Fast: 3 Solid Tools and Best Practices - Codica
Best practices to increase the speed for Next.js apps - Stack Overflow Blog

How to Integrate MongoDB Into Your Next.js App
How NextJS REALLY Works - YouTube
5 Reasons I Use Next.js Over Plain React - YouTube 2021-01
Next.js Crash Course - YouTube 2021-01

Best practices to increase the speed for Next.js apps - Stack Overflow Blog

OpenNext

OpenNext self-host Next.js using serverless

Commentaries

Why I Won't Use Next.js | Epic Web Dev by Kent C. Dodds
Why I'm Using Next.js | Lee Robinson
I DONT USE NEXT JS - YouTube

Next.js 13

released 2022-10

Next.js 13… this changes everything - YouTube
Next.js 13 - The Basics - YouTube
Next.js 13 Fundamentals - YouTube
Learn Next.js 13 With This One Project - YouTube 29:42
NextJS 13 Tutorial: Create a Static Blog from Markdown Files - YouTube 53 minutes

Taxonomy
shadcn-ui/taxonomy: An open source application built using the new router, server components and everything new in Next.js 13.

Next.js App Router: Routing, Data Fetching, Caching - YouTube
Data fetching is by default on server side. But you can use cache (next field) to control its behavior.

NextJS 13 & Why it's complicated - YouTube

Server-side data fetching in Next.js 12 vs. 13 - YouTube
How To Fix NextJS 13's N+1 Problem - YouTube

Next.js 13.1 Explained! - YouTube
Using Fonts in Next.js (Google Fonts, Local Fonts, Tailwind CSS) - YouTube

Building a bidding system with NextJS 🚀 - DEV Community with new features

Building Blog

Data Fetching: Incremental Static Regeneration | Next.js
Incremental Static Regeneration with Next.js - LogRocket Blog

javascript - Next.JS links do not work after exporting static HTML - Stack Overflow

Blog - Markdown/MDX with Next.js | Next.js
How I Built my Blog using MDX, Next.js, and React compares MDX loaders
How to Build Your Own Blog with Next.js and MDX 2022-04, compares MDX loaders
Create a Next.js and MDX blog - LogRocket Blog 2022-03, @mdx-js/loader (Webpack)

Building Better Next.js Static Sites with MDX and Contentlayer 2022-02, contentlayer (mdx-bundler (esbuild))
MDX with Next.js: The Easiest Way to Build a Static Content Site - YouTube 2022-03, contentlayer
Creating a Markdown Blog Powered by Next.js in Under an Hour 2022-01, Tailwind, fs.readdirSync()
Build a Static Next.js Markdown Blog with Typescript, MDX, and Tailwind CSS | Engineering Education (EngEd) Program | Section 2021-12

hashicorp/next-mdx-remote: Load mdx content from anywhere through getStaticProps in next.js replaces next-mdx-enhanced

Nextra

Nextra – Next.js Static Site Generator
How I built my second brain using Next.JS - DEV Community

Pages

Building Your Application: Routing | Next.js
Routing: Dynamic Routes | Next.js
Routing: Linking and Navigating | Next.js

Rendering: Automatic Static Optimization | Next.js
Data Fetching: getStaticPaths | Next.js
Functions: getStaticProps | Next.js

Data Fetching in Next.js
What do you know about pre-rendering, SSG,& getStaticProps in Next.js? – TecForFun
How to use getStaticPaths on dynamic routes in Next.js – TecForFun
NextJS / React SSR: 21 Universal Data Fetching Patterns & Best Practices - WunderGraph

API Routes

Routing: API Routes | Next.js

How to use Next.js API Routes? | refine
Next.js API Routes—What You Need To Know

App Router (Next 13)

opt-in new folder structure in /app

Blog - Layouts RFC | Next.js

NextJS 13 - First Look at the /app Folder & Complete Demo - YouTube
Next.js 13 - Layouts and Pages Explained in 20 mins or so - YouTube
Next.js App Router: Routing, Data Fetching, Caching - YouTube
Are React Server Components Really Slower? - YouTube
Next.js App Router REVIEW (Six Months In Prod) - YouTube

AddyOsmani.com - React Server Components, Next.js App Router and examples
Working with the app directory in Next.js 13 - LogRocket Blog
Building Your Application: Routing | Next.js
Blog - Next.js 13.4 | Next.js App Router, customize app layout in _app.tsx, customize initial page load in_document.js (with Next's HTML components)

What are my thoughts on next.js app router vs pages router - YouTube

Is Next.js App Router SLOW? Performance Deep Dive - YouTube

granular caching of ANY async/fetch() call
streaming of slow response

Server Actions

replaces API Routes
magic that generate RPC code to backend

Data Fetching: Server Actions | Next.js

Type safe Server Actions in your Next.js (App Router) project | next-safe-action
TheEdoRan/next-safe-action: Type safe and validated Server Actions in your Next.js (App Router) project.

Next.js Server Actions... 5 awesome things you can do - YouTube
Server Actions: NextJS 13.4's Best New Feature - YouTube
I Fixed Next.js Server Actions - YouTube

React + Servers = Confusion - YouTube server actions behaves differently when included in a Server Component vs exported as a function called on Client
GitHub - t3dotgg/server-actions-trpc-examples

Proxy

next.config.js Options: rewrites | Next.js
To use rewrites you can use the rewrites key in next.config.js

Equivalent to http-proxy-middleware's src/setupProxy.js

Auth

web-authentication#Auth.js

Routing: Authenticating | Next.js

NextAuth.js
https://next-auth-example.vercel.app

NextAuth.js the easiest authentication for Next.js
Adding email authentication to NextAuth.js

With Iron Session

next.js/examples/with-supertokens at main · vercel/next.js

i18n

amannn/next-intl: A minimal, but complete solution for managing translations, date, time and number formatting in Next.js apps. 🌐

i18next/next-i18next: The easiest way to translate your NextJs apps.
Static HTML Export with i18n compatibility in Next.js
I18n with React and i18next | DigitalOcean
Internationalization In Next.js 13 With React Server Components — Smashing Magazine

Image

Optimizing: Images | Next.js
Components: | Next.js

This new and improved image component requires less client-side JavaScript and simplifies how you style images:

Renders a single <img> without <div> or <span> wrappers
Added support for canonical style prop
Removed layout, objectFit, and objectPosition props in favor of style or className
Removed IntersectionObserver implementation in favor of native lazy loading
Removed loader config in favor of loader prop
Note: no fill mode (yet) so width & height props are required

State management

State Management In Next.js — Smashing Magazine
reactjs - Nextjs and Context API - Stack Overflow

Refresh props from getServerSideProps in Next.js, mutate server props refresh data with router.replace(router.asPath) for SSR pages

getServerSideProps is WEIRD - YouTube

props has to go through props drilling in _app.tsx
props ares serialized as JSON and objects are lost
top down data flow from page level, it must fetch all data that page needs

Stack

Making Websites With Next.js And Strapi - Youtube

T3 App

Create T3 App Next.js + Prisma + trpc
T3 Stack Tutorial - FROM 0 TO PROD FOR $0 (Next.js, tRPC, TypeScript, Tailwind, Prisma & More) - YouTube 3 hours
Full Stack Dev Just Got WAY Better 👀 - YouTube 2022-12,tRPC v10 is a major change, with codemod migration
The T3 Stack - How We Built It - YouTube 2022-07
My Stack Is Changing - YouTube

init.tips - start on the right stack
Building a MODERN Full Stack App for FREE w/ NextJS 12, Typescript, Prisma and more - T3 Stack - YouTube
I PORTED MY APP TO SOLIDJS IN 2 HOURS - No more NextJS??! - YouTube repo vite + trpc + Solid.js + tailwind
Flaws of the T3 Stack - YouTube
Build Your First Application With the T3 Stack: NextJS, Typescript, Tailwind & tRPC for Beginners! - YouTube
How tRPC really works - YouTube
The BEST Stack For Your Next Project - YouTube
We Fixed Mobile Dev - YouTube

A deep dive into T3-Turbo and Clerk - YouTube
clerkinc/t3-turbo-and-clerk: A t3 Turbo starter with Clerk as the auth provider.

Blitz.js

build on top of Next.js, with Prisma powered backend
deploy with Flightcontrol

aws#Service Helper

Blitz.js - The Missing Fullstack Toolkit for Next.js
blitz-js/blitz: ⚡️ The Missing Fullstack Toolkit for Next.js

Get Started with Blitz
Why use Blitz instead of Next.js?

Introduction to Blitz.js. Yet another framework on the block. It… | by Chidume Nnamdi 🔥💻🎵🎮 | Bits and Pieces
Intro to Blitz.js: A full-stack framework for Next.js | InfoWorld
Getting Started with Blitz.js | egghead.io
Intro to Blitz.js: A full-stack framework for Next.js | InfoWorld

Deployment

Choosing the best Next.js hosting platform - LogRocket Blog
How to deploy a Next.js app to production

How To Get Started With Fastify and Next.js using a TypeScript Custom Server - YouTube
fastify/fastify-nextjs: React server side rendering support for Fastify with Next

Next.js FastAPI Starter – Vercel

add assetPrefix OR basePath to next.config.js
basePath will be applied to next/link and next/router

Static HTML

Deploying: Static Exports | Next.js
next export is deprecated and replaced with "output": "export" since 13.3
All components in App Router are Server Components by default, add "use client" to opt-in to Client Components for data fetching at runtime

Deploying: Static Exports | Next.js
Unsupported Feature

Speed up your Next.js (React) app with this neat trick - YouTube pure HTML+CSS

Add {trailingSlash: true} so all pages will use {page}/index.html link
use rewrite (not applicable if you don't have control to web server)

javascript - Next.JS links do not work after exporting static HTML - Stack Overflow
Exporting a NextJS app with correct static page routes on the server

export const config = {
  unstable_runtimeJS: false,
};

Docker

next.js/examples/with-docker at canary · vercel/next.js

next.config.js Options: Automatically Copying Traced Files | Next.js use standalone folder since 12.1

Server Side Rendering

SSR vs SSG in Next.js – tutorial for CTOs and devs