25 | Hey, {user.email}!
26 |
31 |
32 | ) : (
33 |
37 | Login
38 |
39 | )
40 | }
41 |
--------------------------------------------------------------------------------
/src/middleware.ts:
--------------------------------------------------------------------------------
1 | import { NextResponse, type NextRequest } from 'next/server'
2 | import { createMiddlewareClient } from '@/utils/supabase'
3 |
4 | export async function middleware(request: NextRequest) {
5 | try {
6 | // This `try/catch` block is only here for the interactive tutorial.
7 | // Feel free to remove once you have Supabase connected.
8 | const { supabase, response } = createMiddlewareClient(request)
9 |
10 | // Refresh session if expired - required for Server Components
11 | // https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-session-with-middleware
12 | await supabase.auth.getSession()
13 |
14 | return response
15 | } catch (e) {
16 | // If you are here, a Supabase client could not be created!
17 | // This is likely because you have not set up environment variables.
18 | // Check out http://localhost:3000 for Next Steps.
19 | return NextResponse.next({
20 | request: { headers: request.headers },
21 | })
22 | }
23 | }
24 |
25 | export const config = {
26 | matcher: [
27 | /*
28 | * Match all request paths except for the ones starting with:
29 | * - _next/static (static files)
30 | * - _next/image (image optimization files)
31 | * - favicon.ico (favicon file)
32 | * Feel free to modify this pattern to include more paths.
33 | */
34 | '/((?!_next/static|_next/image|favicon.ico).*)',
35 | ],
36 | }
37 |
--------------------------------------------------------------------------------
/src/components/Code.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useState } from 'react'
4 |
5 | const CopyIcon = () => (
6 |
20 | )
21 |
22 | const CheckIcon = () => (
23 |
36 | )
37 |
38 | export default function Code({ code }: { code: string }) {
39 | const [icon, setIcon] = useState(CopyIcon)
40 |
41 | const copy = async () => {
42 | await navigator?.clipboard?.writeText(code)
43 | setIcon(CheckIcon)
44 | setTimeout(() => setIcon(CopyIcon), 2000)
45 | }
46 |
47 | return (
48 |
49 |
55 | {code}
56 |
57 | )
58 | }
59 |
--------------------------------------------------------------------------------
/src/components/ThemeToggle.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
4 | import { useTheme } from 'next-themes'
5 | import { Button } from '@/components/ui/button'
6 | import {
7 | DropdownMenu,
8 | DropdownMenuContent,
9 | DropdownMenuItem,
10 | DropdownMenuTrigger,
11 | } from '@/components/ui/dropdown-menu'
12 |
13 | type ThemeToggleProps = {
14 | side?: 'left' | 'top' | 'right' | 'bottom'
15 | }
16 |
17 | const ThemeToggle = ({ side }: ThemeToggleProps) => {
18 | const { setTheme } = useTheme()
19 |
20 | return (
21 |
7 |
20 |
43 | )
44 | }
45 |
--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | :root {
7 | --background: 0 0% 100%;
8 | --foreground: 240 10% 3.9%;
9 | --card: 0 0% 100%;
10 | --card-foreground: 240 10% 3.9%;
11 | --popover: 0 0% 100%;
12 | --popover-foreground: 240 10% 3.9%;
13 | --primary: 240 5.9% 10%;
14 | --primary-foreground: 0 0% 98%;
15 | --secondary: 240 4.8% 95.9%;
16 | --secondary-foreground: 240 5.9% 10%;
17 | --muted: 240 4.8% 95.9%;
18 | --muted-foreground: 240 3.8% 46.1%;
19 | --accent: 240 4.8% 95.9%;
20 | --accent-foreground: 240 5.9% 10%;
21 | --destructive: 0 84.2% 60.2%;
22 | --destructive-foreground: 0 0% 98%;
23 | --border: 240 5.9% 90%;
24 | --input: 240 5.9% 90%;
25 | --ring: 240 5.9% 10%;
26 | --radius: 0.3rem;
27 | }
28 |
29 | .dark {
30 | --background: 240 10% 3.9%;
31 | --foreground: 0 0% 98%;
32 | --card: 240 10% 3.9%;
33 | --card-foreground: 0 0% 98%;
34 | --popover: 240 10% 3.9%;
35 | --popover-foreground: 0 0% 98%;
36 | --primary: 0 0% 98%;
37 | --primary-foreground: 240 5.9% 10%;
38 | --secondary: 240 3.7% 15.9%;
39 | --secondary-foreground: 0 0% 98%;
40 | --muted: 240 3.7% 15.9%;
41 | --muted-foreground: 240 5% 64.9%;
42 | --accent: 240 3.7% 15.9%;
43 | --accent-foreground: 0 0% 98%;
44 | --destructive: 0 62.8% 30.6%;
45 | --destructive-foreground: 0 0% 98%;
46 | --border: 240 3.7% 15.9%;
47 | --input: 240 3.7% 15.9%;
48 | --ring: 240 4.9% 83.9%;
49 | }
50 | }
51 |
52 | @layer base {
53 | * {
54 | @apply border-border;
55 | }
56 | body {
57 | @apply bg-background text-foreground;
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import { GeistSans } from 'geist/font/sans'
2 | import ThemeProvider from '@/providers/ThemeProvider'
3 | import NextTopLoader from 'nextjs-toploader'
4 | import { Analytics } from '@vercel/analytics/react'
5 | import './globals.css'
6 | import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
7 | import ReactQueryProvider from '@/providers/ReactQueryProvider'
8 |
9 | const defaultUrl = process.env.VERCEL_URL
10 | ? `https://${process.env.VERCEL_URL}`
11 | : 'http://localhost:3000'
12 |
13 | export const metadata = {
14 | metadataBase: new URL(defaultUrl),
15 | title: 'Next.js and Supabase Starter Kit',
16 | description: 'The fastest way to build apps with Next.js and Supabase',
17 | }
18 |
19 | export default function RootLayout({
20 | children,
21 | }: {
22 | children: React.ReactNode
23 | }) {
24 | return (
25 |
31 |
32 | Supabase and Next.js Starter Template
21 |22 | The fastest way to build apps with{' '} 23 | 29 | Supabase 30 | {' '} 31 | and{' '} 32 | 38 | Next.js 39 | 40 |
41 | 42 |
27 |
32 |
33 |
56 | )
57 | }
58 |
--------------------------------------------------------------------------------
/src/components/ConnectSupabaseSteps.tsx:
--------------------------------------------------------------------------------
1 | import Step from './Step'
2 |
3 | export default function ConnectSupabaseSteps() {
4 | return (
5 |
34 |
36 |
39 |
40 |
41 |
55 | Next steps
37 | {isSupabaseConnected ?-
6 |
8 | Head over to{' '} 9 | 15 | database.new 16 | {' '} 17 | and create a new Supabase project. 18 |
19 |23 | Rename the{' '} 24 | 25 | .env.example 26 | {' '} 27 | file in your Next.js app to{' '} 28 | 29 | .env.local 30 | {' '} 31 | and populate with values from{' '} 32 | 38 | your Supabase project's API Settings 39 | 40 | . 41 |
42 |46 | You may need to quit your Next.js development server and run{' '} 47 | 48 | npm run dev 49 | {' '} 50 | again to load the new environment variables. 51 |
52 |56 | You may need to refresh the page for Next.js to load the new 57 | environment variables. 58 |
59 |{JSON.stringify(notes, null, 2)}
28 | }
29 | `.trim()
30 |
31 | const client = `
32 | 'use client'
33 |
34 | import { createBrowserClient } from '@/utils/supabase'
35 | import { useEffect, useState } from 'react'
36 |
37 | export default function Page() {
38 | const [notes, setNotes] = useState{JSON.stringify(notes, null, 2)}
50 | }
51 | `.trim()
52 |
53 | export default function SignUpUserSteps() {
54 | return (
55 | -
56 |
58 | Head over to the{' '} 59 | 63 | Login 64 | {' '} 65 | page and sign up your first user. It's okay if this is just you 66 | for now. Your awesome idea will have plenty of users later! 67 |
68 |72 | Head over to the{' '} 73 | 79 | Table Editor 80 | {' '} 81 | for your Supabase project to create a table and insert some example 82 | data. If you're stuck for creativity, you can copy and paste the 83 | following into the{' '} 84 | 90 | SQL Editor 91 | {' '} 92 | and click RUN! 93 |
94 |99 | To create a Supabase client and query data from an Async Server 100 | Component, create a new page.tsx file at{' '} 101 | 102 | /app/notes/page.tsx 103 | {' '} 104 | and add the following. 105 |
106 |Alternatively, you can use a Client Component.
108 |You're ready to launch your product to the world! 🚀
113 |
57 |
61 | {' '}
75 | Back
76 |
77 |
78 |
116 |
117 | )
118 | }
119 |
--------------------------------------------------------------------------------
/src/components/NextLogo.tsx:
--------------------------------------------------------------------------------
1 | export default function NextLogo() {
2 | return (
3 |
45 | )
46 | }
47 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | ⚡ SupaNext Starter Kit ⚡
4 | 5 |6 | The Last Next.js and Supabase Starter You Will Ever Need 7 |
8 | 9 |
10 |
11 | 
12 |
13 |
14 | 
15 |
16 |
17 |
18 |
12 |
13 |
14 |
15 |
16 |
19 | Created by Michael Troya
20 |
21 |
22 | 23 | 24 |
25 | Features · 26 | Clone and run locally · 27 | Documentation · 28 | Feedback and issues 29 |
30 |31 | 32 | ## Features 33 | 34 | - ⚡️ Next.js 14 (App Router) 35 | - 💚 Supabase w/ supabase-ssr - Works across the entire [Next.js](https://nextjs.org) stack (App Router, Pages Router, Client, Server, Middleware, It just works!) 36 | - ⚛️ React 18 37 | - ⛑ TypeScript 38 | - 📦 [pnpm](https://pnpm.io/) - Fast, disk space efficient package manager 39 | - 🎨 [Tailwind](https://tailwindcss.com/) 40 | - 🔌 [shadcn/ui](https://ui.shadcn.com/) - Beautifully designed components that you can copy and paste into your apps. 41 | - 🧪 Jest w/SWC + React Testing Library - Unit tests for all of your code. 42 | - 🎛️ [MSW](https://mswjs.io/)v2 - Intercept requests inside your tests (set up for testing only) 43 | - 🪝[TanStackQuery](https://tanstack.com/query/v5)v5 - The best way to fetch data on the client 44 | - 📏 ESLint — To find and fix problems in your code 45 | - 💖 Prettier — Code Formatter for consistent style 46 | - 🐶 Husky — For running scripts before committing 47 | - 🚫 lint-staged — Run ESLint and Prettier against staged Git files 48 | - 👷 Github Actions — Run Type Checks, Tests, and Linters on Pull Requests 49 | - 🗂 Path Mapping — Import components or images using the `@` prefix 50 | - ⚪⚫ Dark mode - Toggle theme modes with [next-themes](https://github.com/pacocoursey/next-themes) 51 | - ✨ Next Top Loader - Render a pleasent top loader on navigation with [nextjs-toploader](https://github.com/TheSGJ/nextjs-toploader) 52 | - 🔋 Lots Extras - Next Bundle Analyzer, Vercel Analytics, Vercel Geist Font 53 | 54 | ## Clone and run locally 55 | 56 | 1. You'll first need a Supabase project which can be made [via the Supabase dashboard](https://database.new) 57 | 58 | 2. Create a Next.js app using the Supabase Starter template npx command 59 | 60 | ```bash 61 | pnpm create next-app -e https://github.com/michaeltroya/supa-next-starter 62 | # or 63 | npx create-next-app -e https://github.com/michaeltroya/supa-next-starter 64 | ``` 65 | 66 | 3. Use `cd` to change into the app's directory 67 | 68 | ```bash 69 | cd name-of-new-app 70 | ``` 71 | 72 | 4. Rename `.env.local.example` to `.env.local` and update the following: 73 | 74 | ``` 75 | NEXT_PUBLIC_SUPABASE_URL=[INSERT SUPABASE PROJECT URL] 76 | NEXT_PUBLIC_SUPABASE_ANON_KEY=[INSERT SUPABASE PROJECT API ANON KEY] 77 | ``` 78 | 79 | Both `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY` can be found in [your Supabase project's API settings](https://app.supabase.com/project/_/settings/api) 80 | 81 | 5. You can now run the Next.js local development server: 82 | 83 | ```bash 84 | pnpm run dev 85 | ``` 86 | 87 | The starter kit should now be running on [localhost:3000](http://localhost:3000/). 88 | 89 | > Check out [the docs for Local Development](https://supabase.com/docs/guides/getting-started/local-development) to also run Supabase locally. 90 | 91 | ## Showcase 92 | 93 | Websites started using this template: 94 | 95 | - [mainspring.pro](https://www.mainspring.pro/) 96 | - [Add yours](https://github.com/michaeltroya/supa-next-starter/edit/main/README.md) 97 | 98 | # Documentation 99 | 100 | ### Requirements 101 | 102 | - Node.js >= 18.17.0 103 | - pnpm 8 104 | 105 | ### Scripts 106 | 107 | - `pnpm dev` — Starts the application in development mode at `http://localhost:3000`. 108 | - `pnpm build` — Creates an optimized production build of your application. 109 | - `pnpm start` — Starts the application in production mode. 110 | - `pnpm type-check` — Validate code using TypeScript compiler. 111 | - `pnpm lint` — Runs ESLint for all files in the `src` directory. 112 | - `pnpm format-check` — Runs Prettier and checks if any files have formatting issues. 113 | - `pnpm format` — Runs Prettier and formats files. 114 | - `pnpm test` — Runs all the jest tests in the project. 115 | - `pnpm test:ci` — Runs all the jest tests in the project, Jest will assume it is running in a CI environment. 116 | - `pnpm analyze` — Builds the project and opens the bundle analyzer. 117 | 118 | ### Paths 119 | 120 | TypeScript is pre-configured with custom path mappings. To import components or files, use the `@` prefix. 121 | 122 | ```tsx 123 | import { Button } from '@/components/ui/Button' 124 | 125 | // To import images or other files from the public folder 126 | import avatar from '@/public/avatar.png' 127 | ``` 128 | 129 | ### Switch to Yarn/npm 130 | 131 | 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. 132 | 133 | ## License 134 | 135 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for more information. 136 | 137 | ## Feedback and issues 138 | 139 | Please file feedback and issues [here](https://github.com/michaeltroya/supa-next-starter/issues). 140 | -------------------------------------------------------------------------------- /src/components/SupabaseLogo.tsx: -------------------------------------------------------------------------------- 1 | export default function SupabaseLogo() { 2 | return ( 3 | 101 | ) 102 | } 103 | -------------------------------------------------------------------------------- /src/components/ui/dropdown-menu.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import * as React from 'react' 4 | import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu' 5 | import { CheckIcon, ChevronRightIcon, CircleIcon } from '@radix-ui/react-icons' 6 | 7 | import { cn } from '@/utils/tailwind' 8 | 9 | const DropdownMenu = DropdownMenuPrimitive.Root 10 | 11 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger 12 | 13 | const DropdownMenuGroup = DropdownMenuPrimitive.Group 14 | 15 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal 16 | 17 | const DropdownMenuSub = DropdownMenuPrimitive.Sub 18 | 19 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup 20 | 21 | const DropdownMenuSubTrigger = React.forwardRef< 22 | React.ElementRef