Git Product home page Git Product logo

agence47's Introduction

Next.js and Supabase Starter Kit - the fastest way to build apps with Next.js and Supabase

The fastest way to build apps with Next.js and Supabase

Features · Demo · Deploy to Vercel · Clone and run locally · Feedback and issues More Examples


## Features - Works across the entire [Next.js](https://nextjs.org) stack - App Router - Pages Router - Middleware - Client - Server - It just works! - supabase-ssr. A package to configure Supabase Auth to use cookies - Styling with [Tailwind CSS](https://tailwindcss.com) - Optional deployment with [Supabase Vercel Integration and Vercel deploy](#deploy-your-own) - Environment variables automatically assigned to Vercel project ## Demo You can view a fully working demo at [demo-nextjs-with-supabase.vercel.app](https://demo-nextjs-with-supabase.vercel.app/). ## Deploy to Vercel Vercel deployment will guide you through creating a Supabase account and project. After installation of the Supabase integration, all relevant environment variables will be assigned to the project so the deployment is fully functioning. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-supabase&project-name=nextjs-with-supabase&repository-name=nextjs-with-supabase&demo-title=nextjs-with-supabase&demo-description=This%20starter%20configures%20Supabase%20Auth%20to%20use%20cookies%2C%20making%20the%20user's%20session%20available%20throughout%20the%20entire%20Next.js%20app%20-%20Client%20Components%2C%20Server%20Components%2C%20Route%20Handlers%2C%20Server%20Actions%20and%20Middleware.&demo-url=https%3A%2F%2Fdemo-nextjs-with-supabase.vercel.app%2F&external-id=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-supabase&demo-image=https%3A%2F%2Fdemo-nextjs-with-supabase.vercel.app%2Fopengraph-image.png&integration-ids=oac_VqOgBHqhEoFTPzGkPd7L0iH6) The above will also clone the Starter kit to your GitHub, you can clone that locally and develop locally. If you wish to just develop locally and not deploy to Vercel, [follow the steps below](#clone-and-run-locally). ## Clone and run locally 1. You'll first need a Supabase project which can be made [via the Supabase dashboard](https://database.new) 2. Create a Next.js app using the Supabase Starter template npx command ```bash npx create-next-app -e with-supabase ``` 3. Use `cd` to change into the app's directory ```bash cd name-of-new-app ``` 4. Rename `.env.local.example` to `.env.local` and update the following: ``` NEXT_PUBLIC_SUPABASE_URL=[INSERT SUPABASE PROJECT URL] NEXT_PUBLIC_SUPABASE_ANON_KEY=[INSERT SUPABASE PROJECT API ANON KEY] ``` Both `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY` can be found in [your Supabase project's API settings](https://app.supabase.com/project/_/settings/api) 5. You can now run the Next.js local development server: ```bash npm run dev ``` The starter kit should now be running on [localhost:3000](http://localhost:3000/). > Check out [the docs for Local Development](https://supabase.com/docs/guides/getting-started/local-development) to also run Supabase locally. ## Feedback and issues Please file feedback and issues over on the [Supabase GitHub org](https://github.com/supabase/supabase/issues/new/choose). ## More Supabase examples - [Next.js Subscription Payments Starter](https://github.com/vercel/nextjs-subscription-payments) - [Cookie-based Auth and the Next.js 13 App Router (free course)](https://youtube.com/playlist?list=PL5S4mPUpp4OtMhpnp93EFSo42iQ40XjbF) - [Supabase Auth and the Next.js App Router](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs) # banqueDesTerritoires "# agence47" # agence47 # agence47

agence47's People

Contributors

laurelinepbd avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.