⚡ SupaNext Starter Kit ⚡

The Last Next.js and Supabase Starter You Will Ever Need

_{Created by Michael Troya}

Features · Clone and run locally · Documentation · Feedback and issues

Features

⚡️ Next.js 14 (App Router)
💚 Supabase w/ supabase-ssr - Works across the entire Next.js stack (App Router, Pages Router, Client, Server, Middleware, It just works!)
⚛️ React 18
⛑ TypeScript
📦 pnpm - Fast, disk space efficient package manager
🎨 Tailwind
🔌 shadcn/ui - Beautifully designed components that you can copy and paste into your apps.
🧪 Jest w/SWC + React Testing Library - Unit tests for all of your code.
🎛️ MSWv2 - Intercept requests inside your tests (set up for testing only)
🪝TanStackQueryv5 - The best way to fetch data on the client
📏 ESLint — To find and fix problems in your code
💖 Prettier — Code Formatter for consistent style
🐶 Husky — For running scripts before committing
🚫 lint-staged — Run ESLint and Prettier against staged Git files
👷 Github Actions — Run Type Checks, Tests, and Linters on Pull Requests
🗂 Path Mapping — Import components or images using the @ prefix
⚪⚫ Dark mode - Toggle theme modes with next-themes
✨ Next Top Loader - Render a pleasent top loader on navigation with nextjs-toploader
🔋 Lots Extras - Next Bundle Analyzer, Vercel Analytics, Vercel Geist Font

Clone and run locally

You'll first need a Supabase project which can be made via the Supabase dashboard

Create a Next.js app using the Supabase Starter template npx command

pnpm create next-app -e https://github.com/michaeltroya/supa-next-starter
# or
npx create-next-app -e https://github.com/michaeltroya/supa-next-starter

Use cd to change into the app's directory
```
cd name-of-new-app
```
Rename .env.local.example to .env.local and update the following:
```
NEXT_PUBLIC_SUPABASE_URL=[INSERT SUPABASE PROJECT URL]
NEXT_PUBLIC_SUPABASE_ANON_KEY=[INSERT SUPABASE PROJECT API ANON KEY]
```
Both NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY can be found in your Supabase project's API settings
You can now run the Next.js local development server:
```
pnpm run dev
```
The starter kit should now be running on localhost:3000.

Check out the docs for Local Development to also run Supabase locally.

Showcase

Websites started using this template:

Documentation

Requirements

Node.js >= 18.17.0
pnpm 8

Scripts

pnpm dev — Starts the application in development mode at http://localhost:3000.
pnpm build — Creates an optimized production build of your application.
pnpm start — Starts the application in production mode.
pnpm type-check — Validate code using TypeScript compiler.
pnpm lint — Runs ESLint for all files in the src directory.
pnpm format-check — Runs Prettier and checks if any files have formatting issues.
pnpm format — Runs Prettier and formats files.
pnpm test — Runs all the jest tests in the project.
pnpm test:ci — Runs all the jest tests in the project, Jest will assume it is running in a CI environment.
pnpm analyze — Builds the project and opens the bundle analyzer.

Paths

TypeScript is pre-configured with custom path mappings. To import components or files, use the @ prefix.

import { Button } from '@/components/ui/Button'

// To import images or other files from the public folder
import avatar from '@/public/avatar.png'

Switch to Yarn/npm

This starter uses pnpm by default, but this choice is yours. If you'd like to switch to Yarn/npm, delete the pnpm-lock.yaml file, install the dependencies with Yarn/npm, change the CI workflow, and Husky Git hooks to use Yarn/npm commands.

License

This project is licensed under the MIT License - see the LICENSE.md file for more information.

Feedback and issues

Please file feedback and issues here.