Next.js

Exploring Solid as a faster alternative. Trying to move useful features I find from NextJS into Solid Start.

Example sites

• NextJS + tRPC + TailwindCSS + TS + Prisma + NextAuth
• NextJS, Tailwind, TRPC, Prisma, and NextAuth Starter
• Next.js Prisma Boilerplate
• Next.js Commerce starter kit
• NextJS full stack starter
• Turborepo starter with pnpm (Remix/NextJS)
• Next.js + Tailwind CSS Netflix Redesign
• Skill Recordings Projects - Using Turborepo and pnpm to create a monorepo working environment for multiple applications and a shared common core library.
• Open Source Raid Guild - Built with Next.js and the "T3 Stack". (Tweet)
• Platforms Starter Kit - Template for site builders and low-code tools.
• NextJS Starter with NextAuth, Tailwind & Prisma
• React Dashboard Design - Implement of Vercel's Dashboard design in Next.js.
• zART-Stack - Zero-API, React [Native], & TypeScript.
• Collaborative drawing app built with Replicache
• Next.js with Tailwind, TypeScript and Jest setup
• NextJS + Supabase Instagram Clone
• Tottem - Library management made social. Built with NextJS/TailwindCSS/TS/Prisma.
• OctoLinker site
• Syntax.fm
• Notion Blog - Next.js site using new SSG support with a Notion backed blog.
• Companies / Sites using NextJS
• NextJS official examples
• Next + TypeScript + Yarn monorepo
• Next.js SDK for signing in with Auth0
• Next.js Medium style boilerplate blog
• Next + Netlify Starter
• Next + Netlify Markdown Blog Starter
• Vault Docs (Web)
• MDNEXT - Opinionated starter for your MDX + Next.js needs.
• Egghead new NextJS front end (Why move to Next.js)
• Opinionated Next.js Starter with TypeScript, Tailwind, MDX, and decent SEO
• Blog built using TypeScript/Next.js/Tailwind CSS/MDX Remote/Next SEO
• Canvas-based arrows playground
• Next.js Advanced Starter - Use Tailwind CSS, ESLint, Prettier & absolute imports instantly.
• chakra-next - Opinionated design system for React, based on Chakra UI + Next.js.
• Next FullStack Starter - Next.js + Prisma + TailwindCSS + (Type-)GraphQL. Serves as nice starting point for SaaS products.
• Next Starter Kit - Strict Next.js starter with Tailwind CSS, TypeScript, ESLint and Prettier.
• Simple NextJS PWA boilerplate
• Hasura NextJS Boilerplate
• Next.js blog starter
• Virtual Event Starter Kit - Open source demo that Next.js developers can clone, deploy, and fully customize for events.
• Next.js Examples - Explore all of the official Next.js examples.
• Dan Abramov's Blog in Next.js (Tweet)
• next-ignite - Flexible next.js based documentation website with content authoring in MDX.
• Next.js Incremental Static Regeneration with SWR - Lightning fast static pages with ISR, instantly updated with SWR.
• Tailwind Nextjs Starter Blog
• Next.js landing page template for SaaS products (Web)
• Next js Auth boilerplate
• Next.js + AWS S3 Upload - Example of a Next.js application allowing you to upload photos to an S3 bucket.
• Trello Clone - Built with Nextjs framework with Typescript and Chakra UI library with support from MongoDB.
• XState Next Boilerplate - Performant, robust starting point for any React application.
• Create Next Stack - Opinionated interactive CLI tool to easily set up the boilerplate of a new Next.js app.
• Liveblocks × Next.js - Shows how to use Liveblocks with Next.js.
• NextJS Starter Boilerplate
• Supabase NextJS Auth - Magic Link Authentication and Route Controls with Supabase and Next.js.
• next-bucket - Template to start a project easily with NextJS and Textile Buckets.
• graphlatte - Next.js template with GraphQL, Urql, Prisma, Nexus and Tailwind.
• Nextjs-auth-prisma boilerplate - Build bleeding-edge full-stack applications using Next.js, GraphQL, TypeScript and Prisma.
• Giant Sur - macOS Big Sur UI clone for the web built with React, Next.js, TypeScript, and Tailwind CSS. (Web)
• Ultimate SAAS template - Typescript/Next.js/NextAuth.js/Prisma/Stripe/TailwindCSS/PostgreSQL. (HN)
• TypeScript starter for Next.js
• Next PWA Template - Next.js progressive web app template.
• NextJS Monorepo - Monorepo / workspaces concepts oriented around NextJS.
• Ask Me Anything (Code)
• Typescript + NextJS + React Native + GraphQL + Prisma
• Awesome Links - Source code for the tutorial series of three parts about building a Full Stack Web application With TypeScript, PostgreSQL, Next.js, Prisma & GraphQL.
• Tailwind NextJS Starter Blog
• NextJS Postgres Template
• Next.js marketing website template for SaaS startups
• RainySystems Template Web App - Built with Next.js and Appwrite.
• NextJS Lite Example - Server side only rendering.
• next-markdown - Easily generate pages from markdown files in any Next.js project.
• THUBurrow - Forum built by Next.js and Rocket.
• Materio - Powerful & Comprehensive free Next.js React admin template based on MUI.
• Irvan Malik's NextJS Blog
• Image Gallery with Next.js, Supabase, and Tailwind CSS
• Lightweight Next.js Portfolio site template
• Next.js site w/ a blank custom Nextra theme (w/Tailwind)

NextJS plugins

• Next SEO - Plugin that makes managing your SEO easier in Next.js projects.
• Next.js + MDX Enhanced - Enables MDX pages, layouts, and front matter.
• Zero Config PWA Plugin (How to Create a PWA With Next.js in 10 Minutes)
• next-translate - Tool to translate Next.js applications.
• next-i18next - Easiest way to translate your NextJs apps. (Video)
• Netlify Next.js cache - Cache the Next.js build folder in your Netlify builds.
• next-dark-mode - Enable dark mode for Next.js.
• NextAuth - Authentication library for Next.js projects. (Web) (Example) (Docs Code) (Tweet)
• next-optimized-images - Automatically optimizes images used in next.js projects (jpeg, png, svg, webp and gif).
• next-session - Simple promise-based session middleware for Next.js, micro, Express, and more.
• next-connect - Router and middleware layer for Next.js, Micro, or Node.js HTTP Server.
• next-iron-session - Next.js stateless session utility using signed and encrypted cookies to store data.
• next-unused - Find unused files in your Next.js projects.
• next-img - Next.js plugin for embedding optimized images.
• Next.js plugin for preact X
• next-sitemap - Sitemap generator for next.js. Generate sitemap(s) and robots.txt for all static/pre-rendered pages.
• Netlify Next.js cache - Cache the Next.js build folder in Netlify builds.
• next-boost - Middleware which adds a disk cache layer to your SSR applications. Was built originally for Next.js SSR applications and can be used in any node.js http.Server based application.
• next-router-scroll - Take control of when scroll is updated and restored in your Next.js projects.
• babel-plugin-superjson-next - Automatically transform your Next.js Pages to use SuperJSON.
• next-csrf - CSRF mitigation for Next.js.
• next-transpile-modules - Next.js plugin to transpile code from node_modules.
• Next.js S3 Upload - Upload files from your Next.js app to S3.
• NextStripe - Simplified server-side Stripe workflows in Next.js
• next-joi - Validate NEXT.js API Routes with joi.
• next-plugin-query-cache - Build-time query cache for Next.js. Works by creating an HTTP server during the build that caches responses.
• next-plugin-preval - Pre-evaluate async functions during builds and import them like JSON.
• next-api-decorators - Collection of decorators to create typed Next.js API routes, with easy request validation and transformation. (Article)
• Next.js + Linaria
• nextjs-multi-domain-locale - Hosting multiple domains on the same Next.js site (while maintaining multiple languages and SSG).
• next-rpc - Makes exported functions from API routes accessible in the browser. Just import your API function and call it anywhere you want.
• next-runtime - All you need to handle POST requests, file uploads, and api requests, in getServerSideProps.
• next-useragent - Parses browser user-agent strings for next.js.
• Next Opengraph Image - Generate Open Graph images for Next.js on build.
• nextjs-breadcrumbs - Dynamic, highly customizable breadcrumbs component for Next.js.
• Essential Next.js Build Plugin - Build plugin to integrate Next.js seamlessly with Netlify.
• next-plugin-imagegen - Next.js plugin turns jsx components as image.
• next-head-seo - Light-weight SEO plugin for Next.js.
• Next.js drop-in analytics support
• next-composition - Next.js utility for reusing getServerSideProps and getStaticProps logics. (Reddit)
• next-router-query - Drop-in alternative of useRouter().query that tries it's best to get the query params on the first mount.
• next-sanity - Sanity.io toolkit for Next.js
• next-g11n - Translate and localize your Next.js app smoothly.
• next-multilingual - Opinionated end-to-end solution for Next.js applications that requires multiple languages.
• HappyKit Flags - Feature Flags for Next.js. (Web)
• HappyAuth - Lightweight authentication specifically designed for Next.js.
• HappyKit Analytics - Analytics specifically designed for Next.js.
• Next-Plausible - Simple integration for Plausible Analytics.
• NextAuth.js Adapters - Next-auth adapters that are maintained by the community to support any database.
• next/image loader for imgproxy (S3)
• next-export-i18n - Internationalize (18n) next.js with true support for next export.
• next-compose-plugins - Cleaner API for enabling and configuring plugins for next.js.
• Next-Multipart - Easy & Simple File Uploads for Next.js.
• next-layout - Add persistent and nested layouts to your Next.js projects in a declarative way.
• Next Page Layout - Type safe, zero dependency layout solution with data fetching capabilities for Next.js.
• next-with-split - Plugin for split testing (A/B testing) in Next.js.
• next-static-paths - Statically prevent 404s in your Next.js applications using TypeScript.
• nextjs-redirect - Redirect to any URL in NextJS both in client and server.
• Next.js API OG Image - Generate open-graph images dynamically in HTML or React using Next.js API Routes. Suitable for serverless environment.
• next-dx - Enhance NextJS development with utilities for local and remote content.
• next-pagination - Best damn pagination component. For Next.js.
• Next Layout Loader - File-system based nested layouts for next.js.
• Next SuperJSON - Automatically transform your Next.js Pages to use SuperJSON, without losing swc support.
• Next Super Performance - Partial hydration for Next.js with Preact X.
• recma-nextjs-static-props - Expose top-level identifiers in Next.js app.js.
• Connected Next Router - Redux binding for Next.js Router compatible with Next.js.
• next-international - Type-safe internationalization (i18n) for Next.js.

Notes

• getStaticProps is a reverse proxy. It's the simplest reverse proxy ever. It's a function, exported alongside your React component.
• export const config = { unstable_runtimeJS: false } will allow to export a page with only HTML/CSS.
• Cache control headers on the response to revalidate NextJS routes. res.setHeader(“cache-control”, “s-maxage=1, stale-while-revalidate=59”)
• New Relic Next.js instrumentation
• Nested routes allow: 1. Your layout to preserve after navigation. 2. Subcomponents/routes to have lifecycles like the ability to load data. If your rooting tree is statically analyzable you can start fetching the nested routes data before navigation.

Links

• next-postgres - React 16.4.2 + NextJS 7.0.2 + Emotion + Sequelize 4/Postgres + Passport Local Auth + Zeit or Heroku Deployment.
• Nice Boys™️ Product Boilerplate - Quickly build new products and apps.
• So you want to build a web app? - Tim Neutkens (2019)
• Does NextJS will be soon obsolete? - Great answer by main dev of next.js
• Redux wrapper for Next.js
• Performance analysis: Next.js SSR on Node.js
• Introducing Create Next App (2019)
• Persistent Layout Patterns in Next.js (2019)
• Universal Next.js Route
• Awesome Next.js
• The Next.js Handbook
• Static Generation / SSG Improvements
• Next.js course
• Next.js website source
• Next.js Plugins
• next-urql - Set of convenience utilities for using urql with NextJS.
• Next.js Apollo TypeScript pre-configured starter with great DX
• Mastering NextJS - Premiere video course for building production, server-side rendered applications with Next.js and React.
• NextJS/Reason/Tailwind Template
• dotJS 2019 - Tim Neutkens - What to expect from a modern web framework?
• Next & Apollo Example
• next-learn-demo - Meant to be used with the Next.js tutorial on https://nextjs.org/learn.
• Next.js Starter with User Authentication/Authorization
• next-purgecss - Nextjs + purgecss for faster websites.
• next-offline - Make your Next.js application work offline using service workers via Google's workbox.
• Next.js Stats GitHub Action - Downloads and runs project with provided configs gathering stats to compare branches.
• React ESI - Blazing-fast Server-Side Rendering for React and Next.js.
• Server-side Only React with Next (2020) (HN)
• Serverless NextJS - Deploy your Next.js apps on AWS Lambda@Edge via Serverless Components.
• next-aws-lambda-webpack-plugin - Pack a compat layer between next.js serverless page and AWS Lambda.
• Next.js Static Props
• Next.js Team AMA (2020)
• next-codegen - Fast API route and page generation for Next.js projects.
• NextJS Default Template - Opinionated Boilerplate for NextJS, Tailwind and Reason.
• Getting started with Next.js, ZEIT Now, and Firebase (2020)
• NextJS Tips - Collection of useful daily Next.js tips that will allow you to improve your skills.
• nookies - Collection of cookie helpers for Next.js
• Building a Markdown blog with Next 9.3 and Netlify (2020)
• Server-Side Rendered Real-time Web App with Next.js, AWS Amplify & GraphQL (2019)
• Improve your SEO and Social Sharing Cards with Next.js (2020)
• Next.js at Vercel (2020)
• Improved Next.js and Gatsby page load performance with granular chunking (2020)
• Building my first Next.js app (2020)
• Handy new features in Next.js 9.4 (2020)
• TypeGraphQ, TypeORM & Next.js Boilerplate
• aws-cognito-next - Authentication helpers to enable usage of AWS Cognito in next.js applications.
• Creating a Next.js mono repository project with TypeScript
• NextJS + Preact Demo
• 2 Ways to Create Server-Rendered Routes Using Next.js and Netlify (2020)
• next-on-netlify - Utility for hosting NextJS applications with Server-Side Rendering on Netlify.
• Next.js 101: What you should know (2020)
• Building my new website with Next.js, TailwindCSS, and Vercel (2020)
• How to contribute to Next.js (2020)
• Data Fetching with NextJS: What I learned (2020)
• NextJS features overview by Tim (2020)
• What is Next.js Incremental Static (Re)Generation? (2020)
• The Hitchhiker’s Guide to Next.js (2020)
• Building the Tailwind Blog with Next.js (2020)
• Building a Fullstack Twitter Clone with Next.js and Prisma (2020) (Code)
• Next.js 9.5 (HN)
• Minimum Viable SaaS - Feature-complete membership app in less than ~400 lines of code.
• Bison - Full Stack JAMstack in-a-box.
• Authentication Patterns for Next.js (2020)
• Building a Blog with Next.js and MDX (2020)
• Adding Dark Mode to a Next.js Site (2020)
• Next.js News newsletter
• Next.js Conf (HN)
• Bulletproof Next - Be an expert in Next.js.
• Blogging on Next.js: Generating static index pages (HN)
• Quirrel - Job Queueing for Next.js x Vercel. (Code) (Awesome)
• Create a Next.js RSS feed for your static website (2020)
• Replacing Create React App with the Next.js CLI (2020)
• next-themes - Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing.
• Next page tester - Enable DOM integration testing on Next.js pages.
• Debugging Next.JS (2020)
• Next.js - The Data Story (2020)
• useQueryState for Next.js - Like React.useState, but stored in the URL query string.
• Create a Next.js App Docs (Starter Code)
• next-placeholder - Roll-you-own placeholders for Next.js images.
• Next Apollo - Package for using Apollo within a Next.js application.
• next-google-fonts - Tiny next/head helper for loading Google Fonts fast and asynchronously. (Tweet)
• Automatically optimize images on a Next.js MDX Blog (2020)
• Build a site from scratch with Next.js, TypeScript, Emotion and Netlify
• next-client-script - Supercharge the performance of your Next.js apps by using a minimal client runtime.
• Next Crud - Helper library that creates CRUD API routes with one simple function based on a Prisma model for Next.js.
• React Server Components in Next.js
• Updating Static Next.js Pages Instantly (2021)
• Bedrock - Modern full-stack Next.js & GraphQL boilerplate.
• next-gen - Next.js Codebase Generator.
• Next.js Subscription Payments Starter
• Learn Next.js in 10 Tweets (2021)
• Sign in With Apple Next JS (2020)
• How to manage database connections in NextJS? (2021)
• Buidling a Realtime Chat App with Next.js, Ably, and Vercel
• A simple approach to testing next.js apps
• Micro Frontends in NextJS with Webpack 5 (2021)
• Yarn Workspaces + XState + Next.js Template
• Terraform Next.js module for AWS
• Terraform Next.js Image Optimization module for AWS
• How to fix layout shifts to improve SEO in Next.js apps (2021)
• next-data-hooks - Use getStaticProps and getServerSideProps as react hooks.
• Using Docker with Next.js (and Deploying with Google Cloud Run)
• If you use Next.js, what is your favorite part about it? (2021)
• Difference between SSR, SSG, CSR and SPA (2021)
• How to make Next.js site more secure (2021)
• Transitioning Mailbrew from CRA to NextJS (2021)
• Next Remote Watch - Decorated local server for next.js that enables reloads from remote data changes.
• What is Incremental Static Regeneration (ISR) with Next.js?
• next-password-protect - Password protect your Next.js deployments.
• NextAuth.js TypeScript Example - Example of how to use the NextAuth.js library to add authentication to a Next.js application with Typescript.
• A Complete Guide To Incremental Static Regeneration (ISR) With Next.js (2021)
• 4 techniques for structuring Next.js applications (2021)
• Portable apps with Go and Next.js (2021) (Code)
• next-test-api-route-handler - Confidently unit test your Next.js API routes/handlers in an isolated Next.js-like environment.
• Generating a robots.txt in Next.js (2021)
• How to build file upload forms on Next.js (2021)
• Next.js: restrict pages to authenticated users (2021)
• Host a Next.js SSR app with real-time data on AWS Amplify (2021)
• A Complete Beginner's Guide to Next.js (2021)
• How to embed Keystone + SQLite in a Next.js app
• Building a SaaS Application with Next.js, Prisma, Auth0 and Stripe (2021)
• Avoid refetching data in NextJS when navigating (2021)
• Shallow Routing in Next.js (2021)
• How to Build a Fullstack App with Next.js, Prisma, and PostgreSQL (2021)
• Full Stack Development with Next.js and Supabase (2021)
• Playwright Next.js Example
• Next.js 11 (2021) (HN)
• Next.js Live - Code in the browser. With your team. (HN)
• Using Next.js and Vercel to instantly load a data-heavy website (2021)
• Refresh props from getServerSideProps in Next.js, mutate server props
• Rewriting ctrl-v using Next.js (2021)
• The magic of react-query and supabase (2021) (Reddit)
• Preact for Next (2021)
• next-remote-refresh - Enable Fast Refresh for remote data in NextJS.
• How I Built My Site with Next.js (2021)
• Next.js Bundle Analysis Github Action - Github action that provides detailed bundle analysis on PRs for next.js apps.
• Next.js: The Ultimate Cheat Sheet To Page Rendering (2021)
• Workaround for _next/data URLs throwing 404, for multiple Next.js Apps Running On Same Domain (2021)
• Next.js Cron - Cron jobs with Github Actions for Next.js applications on Vercel.
• Running a Next.js Site on Cloudflare Pages (2021)
• Krabs - Enterprise-ready Express.js middleware for serving thousands of different websites from a single Next.js instance. (Web)
• Real-World Next.js Book (2021) (Code)
• Authentication Patterns for Next.js (2020)
• next-intl - Minimal, but complete solution for managing translations, date, time and number formatting in Next.js apps. (Article)
• Authentication for NextJS with GraphQL & REST APIs and SSR (Server Side Rendering)
• fastify-nextjs - React server side rendering support for Fastify with Next.
• The Ultimate Guide To Firebase With Next.JS (2021)
• What I struggled with Next.js using Firebase Hosting (and enable SSR) (2021)
• From Firebase/Redis to MySQL with PlanetScale (2021) (Tweet)
• Cache Is Everything but Simple with Nextjs and React Query (2021)
• Next.js Starters
• Next.js, Prisma, PlanetScale and Vercel (2021) - Deploy your Next.js + Prisma app to PlanetScale and Vercel.
• Next.js API Routes validation using Middlewares and Yup
• Using Postmark with NextAuth.js
• Logging in Next.js (2020)
• Building a Blog With Next.js and MDX (2021)
• Rakkas - Lightning fast Next.js alternative powered by Vite. (Web) (Reddit)
• How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js (2021)
• Next.js X Prisma Workshop - Build a full stack app using Next.js and Prisma.
• Next.js Cheat Sheet
• NextGraphQL.js - Zero-config GraphQL server for Next.js, supporting Vercel Serverless environment runtime.
• Next.js 12 (2021) (HN) (Tweet) (Keynote)
• How Next Middleware / Edge Functions work (2021)
• Streaming in Next.js - Kara Erickson (2021)
• "So You Think You Can Build A Dropdown?" — Pedro Duarte (2021)
• Next.js 12 React Server Components Demo
• Next.js Conf 2021 - YouTube
• Vercel Examples
• Next.js - Replace React with Preact (2021)
• Break Stuff Until it Works — Optimizing performance in NextJS (2021)
• Integrate Storybook in a Next.js Application (2021)
• How to create a generic protected route in Next.js (2021)
• Guide to using images in Next.js (2021) (Reddit)
• Code Walkthrough for Next.js / Tailwind / Prisma / PlanetScale App (2021)
• React Server Components Roadmap for Next.js (2021)
• What are using getInitialProps for? (2021)
• Latest recommendation on CSS for a Next.js site (2021)
• Production-Grade Next.js (Code)
• Open-Source Auth for NextJS (2021) (HN)
• Let's build Twitter with (Next.js, Tailwind CSS, Firebase v9, NextAuth, Recoil) (2021) (Code)
• An Inconsistent Truth: Next.js and Type Safety (2021)
• NextJS with WebAssembly example
• Build a SaaS product with Next.js, Supabase and Stripe (2021)
• Get started with Storybook and Next.js (2021)
• next-router-mock - Mock implementation of the Next.js Router.
• pathpida - TypeScript friendly internal link client for Next.js, Nuxt.js and Sapper.
• Next.js Modal Routing (2022) (Code)
• Most requested Next.js features (2022)
• Next.js 12.1: On-demand ISR, SWC support for styled-components, Relay, Jest (2022) (HN)
• On-Demand Incremental Static Regeneration
• Putting test files in the pages folder in a Next.js app (2022) (Tweet)
• next-graphql-server - Library for building production-grade GraphQL servers using Next.js with API Routes.
• Keystone Next Auth
• How to create a link preview with Next.js, Prisma and TailwindCSS (2022)
• Upgrading Next.js for instant performance improvements (2022)
• Nexus - NextJS VScode extension to visualize component tree. (Web) (Intro)
• Building a Marketing Platform with Next.js, Cloudflare, & Contentful (2022)
• Building an Image Gallery with Next.js, Supabase, and Tailwind CSS (Tweet)
• Vercel Style Guide - Home of Vercel's style guide, which includes configs for popular linting and styling tools.
• How DoorDash improved Web Page Performance and scaled with Next.JS (2022)
• Storybook Addon Next - No config Storybook addon that makes Next.js features just work in Storybook.
• Vulcan Next - Build GraphQL-based applications with Next.js. (Docs)
• Rust and WebAssembly Serverless Functions in Vercel (Code)
• Generate Open Graph images for your static Next.js site (2020) (Tweet)
• Picking the right rendering strategy in NextJS
• Building a Mini Next.js (2022)
• Building a Multi-Tenant Web App with Next.js (2022)
• Next.js Layouts - Nested routes and layouts, designed for Server Components. (HN)
• High Performance Personalization with Next.js Middleware (2022) (Reddit)
• Next.js Routing and Layouts RFC tips
• Why I Use NextJS For ALL My Backends (2022)
• Next.js 12.2: Middleware, On-Demand ISR, and Edge API Routes / SSR (2022)
• Revalidate NextJS on event - Docker-deployable app that listens for contract events and revalidates static pages on Next.js.
• Next.js Routes - Autogenerate type safe routing for Next.js.
• next-swr-endpoints - Intuitive way to fetch API endpoints in Next.js using SWR + compile time magic.
• Generic Replicache backend for Next.js