NextJS Supabase Dashboard

This is a dashboard starter template for the NextJS 14 app router using supabase based on shadcn-ui.

Denpendency

• NextJS 14 + Typescript + Tailwind
• Shadcn UI (Radix UI) + TimePicker + TagInput
• react-hook-form + zod
• react-i18next + zod-i18n-map
• Redux Toolkit + Redux Persist
• Supabase OAuth with PKCE flow (@supabase/ssr)
• Supabase Email Auth with PKCE flow (@supabase/ssr)
• Supabase Role-based Access Control (RBAC)
• CKEditor 5 + Supabase Upload Adapter
• PWA (Progressive Web Apps)

Table of Contents

• NextJS Supabase Dashboard
  • Table of Contents
  • Screenshots
  • Folder and file Structure
  • Getting Started
  • Generate Favicon
  • Docs
  • Define App URL
  • Troubleshooting
  • License
  • Reference

Screenshots

Folder and file Structure

The folder and file structure is based on nextjs app router next.js project structure.

.
├── app/                        # App Router
│   └── api/
│       ├── auth/               # Public API for authentication
│       └── v1/                 # APIs that require authentication
├── components/                 # React components
├── config/                     # Configuration for site
├── context/
│   └── app-provider.ts         # Register context provider
├── hooks/
├── docs/                       # Documents
├── lib/                        # Utility functions
├── public/                     # Static assets to be served
│   └── [locales]/              # Internationalization
├── queries/                    # SWR for API
├── screenshots/                # Screenshots
├── store/                      # Redux reducers
├── supabase/                   # Supabase CLI
├── types/
├── components.json             # Shadcn UI
├── i18next.config.ts           # Internationalization
└── package.json                # Project dependencies and scripts

Getting Started

Find and replace the following text in supabase/seed.sql and run sql.

• YOUR_BUCKET_ID
• username@example.com

Cloning a repository.

git clone https://github.com/w3labkr/nextjs-supabase-dashboard.git

Install all modules listed as dependencies.

npm install

Start the development server.

npm run dev

Generate Favicon

Add favicon.ico file to /app directory.

• Favicon.ico & App Icon Generator

Generate manifest and splash screen.

vim public/manifest.json

• PWA Image Generator, Maskable Icon Generator, PWA Manifest Generator
• Custom Splash Screen on iOS

Docs

• INSTALLATION
• CONFIGURATION
• DEPLOYING
• LINTER
• EXAMPLES

Define App URL

• Environment: NEXT_PUBLIC_APP_URL=
• Supabase Auth: Authentication > URL Configuration > Redirect URLs
• Google cloud console: API > Credentials
• Google cloud console: API > OAuth

Troubleshooting

• For eslint, check the latest version of @typescript-eslint/eslint-plugin and upgrade.
• For ckeditor5, check the downloadable version in the online builder and upgrade.
• If an error occurs in the pre-rendered sitemap.xml, access the page in development mode and run a rebuild.

License

This software license under the MIT License.

Reference

• shadcn-ui/ui
• shadcn-ui/taxonomy
• nextjs-slack-clone
• nextjs-subscription-payments