Skip to content

πŸš€βš‘οΈ Free Boilerplate and Starter kit for Next.js 14+, Supabase, Tailwind CSS 3.2 and TypeScript. πŸš€ Next.js πŸ”₯ Supabase πŸ’» TypeScript πŸ’š ESLint 🎨 Prettier 🐢 Husky 🧹 Lint-Staged πŸ§ͺ Jest πŸ§ͺ Testing Library πŸ•ΉοΈ Playwright ✍️ Commitizen πŸ’¬ Commitlint πŸ’» VSCode πŸŒͺ️ Vercel 🎨 PostCSS πŸƒ Tailwind CSS βš›οΈ React Query

License

Notifications You must be signed in to change notification settings

ahmad7k/nextbase-nextjs-supabase-starter-1.0

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

94 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

NextBase Starter

NextBase Lite Open Source Free Boilerplate

Nextbase Lite is a simple Next.js 13 + Supabase boilerplate. It includes a Next.js 13 app with Typescript, Supabase and Tailwind CSS. It includes the all new app folder, layout components, React server components and more!

Features

  • πŸš€ Next.js 13 with async components
  • πŸ’» Data fetching examples in React server and client components. Suspenseful data fetching with minimal loading screens.
  • βš›οΈ React query setup configured
  • πŸ”₯ React Hot Toast component
  • πŸ’» Fully typed with Typescript. Includes automatic type generation for Supabase tables
  • 🎨 Tailwindcss
  • πŸ§ͺ Unit testing and integration testing setups built-in
  • πŸ’š Eslint, typescript, prettier, postcss configured for dev and test environments
  • πŸ“ˆ Automatic sitemap generation
  • πŸ” SEO metadata, JSON-LD and Open Graph tags with NEXT SEO
  • ✍️ Semantic release with Automatic changelog generation
  • 🎨 Prettier Code formatter
  • πŸ’Ž Minimal styling
  • πŸ“– Codebase which is easy to read and modify

Development

  1. Clone the repo
  2. Install dependencies with yarn
  3. Create a Supabase account if you don't have one already
  4. Create a new project in Supabase
  5. Link Supabase to your project using yarn supabase link --project-ref <project-ref>. You can get your project ref from the Supabase Project dashboard (Project Settings -> API)
  6. Duplicate .env.local.example and rename it to .env.local and add the Project ref, Supabase URL and anon key.
  7. Push the database schema to your Supabase project using yarn supabase db push.
  8. Generate types for your Supabase tables using yarn generate:types:local.
  9. Run yarn dev to start the development server.

Testing

  1. Unit test using yarn test
  2. End-to-end test using yarn test:e2e

Deployment

This is a simple Next.js project. Deployment is the same as any other Next.js project. You can deploy it to Vercel, Netlify, or any other hosting provider.

Contributing

Contributions are welcome. Please open an issue or a PR.

License

MIT

Troubleshooting

Checkout the TROUBLESHOOTING.md file for common issues.

Premium NextBase Boilerplate

Also checkout our premium boilerplate with more features. It includes a fully functional authentication system, user profiles, organisations, row level security, and more.

NextBase Boilerplate

About

πŸš€βš‘οΈ Free Boilerplate and Starter kit for Next.js 14+, Supabase, Tailwind CSS 3.2 and TypeScript. πŸš€ Next.js πŸ”₯ Supabase πŸ’» TypeScript πŸ’š ESLint 🎨 Prettier 🐢 Husky 🧹 Lint-Staged πŸ§ͺ Jest πŸ§ͺ Testing Library πŸ•ΉοΈ Playwright ✍️ Commitizen πŸ’¬ Commitlint πŸ’» VSCode πŸŒͺ️ Vercel 🎨 PostCSS πŸƒ Tailwind CSS βš›οΈ React Query

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 94.9%
  • JavaScript 2.9%
  • CSS 2.1%
  • Shell 0.1%