Next.js Starter

My personal and opinionated way to get started on Next.js projects with most optimal configuration possible.

Features

• Minimal bleeding edge Next.js 13 boilerplate w/ React 18
• Prioritized for css-in-js using Stitches, w/ theme support
• Pre-configured with TypeScript, ESLint, and Prettier out of the box
• Project structure based off of bulletproof-react
• Simple, but useful demo features theme handling + data fetched/displayed with ssr

Included Libraries

• @stitches/react: "CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience"

• @radix-ui/colors: Library that provides palletes and color scales for design. Pairs well with stitches and next-themes to provide a complete theming solution.

• sanitize.css: CSS library that provides consistent, cross-browser default styling of HTML elements alongside useful defaults

• next-themes: Abstraction for handling themes in Next.js and features no flash on load (both SSR and SSG)

• reactive-button: Tiny 3D animated React button library with zero dependencies

• axios: Promise based HTTP client with developer friendly API and automatic transforms

• dayjs: Fast, lightweight, and minimalist JavaScript library that can handle the parsing, validating, manipulating, and formatting of dates and/or times

• type-fest: Collection of missing "essential" TypeScript types

Not Included But Suggested

UI Libraries

• radix-ui/primitives: Low-level UI component library with a focus on accessibility, customization and developer experience

• @nextui-org/react: More "complete" UI library that already uses stitches under the hood, and allows for a fast and modern UI regardless of design experience

Icons

• react-icons: Library with svg icons of popular icon packs built for React

• icones: Icon explorer that allows for the browsing of ready to use icons, as svg React components, with no installation or dependencies required

Animation

• framer-motion: Production-ready motion library for React

Virtualization

• react-virtualized: Established React library for efficiently rendering large lists and tabular data

• react-virtuoso: Newer alternative for react-virtualized with features such as variable dynamic height and responsive grid layouts out of the box

Data Fetching

• react-query: "The missing data-fetching library for React". Includes fetching, caching, synchronizing, and updating server state

• swr: React hooks for data fetching, and more lightweight alternative to react-query

ORM

• prisma: Type-safe ORM with abstraction and model generation / migrations

• objection.js: More robust ORM built on knex

GraphQL

• Hasura: Instant Realtime GraphQL APIs over PostgreSQL with fine grained access control

• urql: Highly customisable and versatile GraphQL client

PWA Support

• next-pwa: Zero config PWA plugin for Next.js with workbox