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

• 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)

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

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

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

• YOUR_BUCKET_ID
• username@example.com

Clone the repository to the current directory.

git clone https://github.com/w3labkr/nextjs14-supabase-blog.git .

Install all modules listed as dependencies.

npm install

Start the development server.

npm run dev

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

• INSTALLATION
• CONFIGURATION
• DEPLOYING
• LINTER
• EXAMPLES

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

• 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.

This software license under the MIT License.

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