imbhargav5 / nextbase-nextjs-supabase-starter

🚀⚡️ 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

NextBase Starter

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-nextjs-supabase-starter's Issues

Add supabase cli action

How can we add the Supabase CLI action to the workflow properly ? Do we also need to change how we write migrations ?

The automated release is failing 🚨

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Cannot push to the Git repository.

semantic-release cannot push the version tag to the branch main on the remote Git repository with URL https://x-access-token:[secure]@github.com/imbhargav5/nextbase-nextjs13-supabase-starter.git.

This can be caused by:

• a misconfiguration of the repositoryUrl option
• the repository being unavailable
• or missing push permission for the user configured via the Git credentials on your CI environment

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

yarn generate:types:local command not working

command line output:

yarn generate:types:local
yarn run v1.22.19
$ export $(cat .env.local | xargs) && supabase gen types typescript --project-id ${SUPABASE_PROJECT_REF} --schema public > src/lib/database.types.ts
'export' is not recognized as an internal or external command,
operable program or batch file.
error Command failed with exit code 255.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Convert this repo into a public template

Please convert this repo into a public template so that we can easily import this repository into our account

next.js 14

hi,

can you update to the latest nextjs 14. it's very stable.

styles are not loaded in production

Hello,

I created a new Vercel project directly from the main branch of this repo. The only change I made was to add my env vars to Vercel settings.

Locally, everything works, including styles. However, once deployed to Vercel, the styles are no longer rendering and the pages load un-styled.

Project url: https://test-next-supabase-seven.vercel.app/