• Stars
    star
    525
  • Rank 83,836 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 1 year ago
  • Updated 14 days ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

πŸš€βš‘οΈ 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  Open Source Free Boilerplate

Nextbase OSS Boilerplate 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

More Repositories

1

rooks

Essential React custom hooks βš“ to super charge your components!
TypeScript
2,872
star
2

react-lazy-progressive-image

React Progressive images with Lazy loading ⚑
JavaScript
46
star
3

react-universal-starter

React@16, react-router@4, redux and webpack@4 starter project
JavaScript
45
star
4

armin

Declarative state machines for React!
JavaScript
20
star
5

rehooks-visibility-sensor

Checks whether a Ref has scrolled into view or not.
JavaScript
13
star
6

dictionary-offline

A simple project that uses Service Workers and PouchDB for an offline experience.
JavaScript
10
star
7

clickable-npm-scripts

Execute npm scripts on one click in atom
JavaScript
9
star
8

puppeteer-pdf-action

A Github Action to create a PDF out of a website URL. Useful to generate resumes out of portfolio websites.
JavaScript
6
star
9

nextjs-bounty-submission

TypeScript
5
star
10

useful-css-resources

3
star
11

fizzbuzz

Fizz Buzz in Javascript
3
star
12

noop

A no operation package with go.
Go
3
star
13

react-scroll-sensor

Get the scroll positions of the window object in your component
JavaScript
3
star
14

generator-react-babel

Create react plugins seamlessly!
JavaScript
3
star
15

codementor-officehours

A simple TDD React App
JavaScript
3
star
16

react-layouts

React UI Layout Library
JavaScript
3
star
17

nextbase-nuxt-supabase-starter

πŸš€βš‘οΈ Free Boilerplate and Starter kit for Nuxt 3+, Supabase, Tailwind CSS 3+ and TypeScript. πŸš€ Nuxt.js Vue.js πŸ”₯ Supabase πŸ’» TypeScript πŸ’š ESLint 🎨 Prettier πŸ’» VSCode πŸŒͺ️ Vercel 🎨 PostCSS πŸƒ Tailwind CSS
Vue
3
star
18

imbhargav5

Hi!
Mustache
2
star
19

fetch-unless-cached

Store fetch responses in localStorage with expire timers! And fetch when idle and update cache in the background
JavaScript
2
star
20

awesome-icon-libraries

2
star
21

react-password-generator

ReactJS powered password generator
JavaScript
2
star
22

redux-awesome-modal

JavaScript
2
star
23

react-pong

Pong game in React
JavaScript
2
star
24

react-select-dropdown

Demo
JavaScript
2
star
25

working_on

Stuff to learn
1
star
26

fbs-net

Gatsby starter for a Contentful project from the community.
JavaScript
1
star
27

eren-light-syntax

Light syntax theme for atom
CSS
1
star
28

timezone-compare

Helps people who do mentorship @codementor or other sites. Cli tool to get a list of times across 2 different timezones for easy checking.
JavaScript
1
star
29

trello-promise

JavaScript
1
star
30

hashnode-user-with-posts-json

JavaScript
1
star
31

mergesort-with-generators

Merge sort using generators
JavaScript
1
star
32

pokedex

JavaScript
1
star
33

learn-react

JavaScript
1
star