|
1 |
| -<a href="https://demo-nextjs-with-supabase.vercel.app/"> |
2 |
| - <img alt="Next.js and Supabase Starter Kit - the fastest way to build apps with Next.js and Supabase" src="https://demo-nextjs-with-supabase.vercel.app/opengraph-image.png"> |
3 |
| - <h1 align="center">Next.js and Supabase Starter Kit</h1> |
4 |
| -</a> |
| 1 | +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). |
5 | 2 |
|
6 |
| -<p align="center"> |
7 |
| - The fastest way to build apps with Next.js and Supabase |
8 |
| -</p> |
| 3 | +## Getting Started |
9 | 4 |
|
10 |
| -<p align="center"> |
11 |
| - <a href="#features"><strong>Features</strong></a> · |
12 |
| - <a href="#demo"><strong>Demo</strong></a> · |
13 |
| - <a href="#deploy-to-vercel"><strong>Deploy to Vercel</strong></a> · |
14 |
| - <a href="#clone-and-run-locally"><strong>Clone and run locally</strong></a> · |
15 |
| - <a href="#feedback-and-issues"><strong>Feedback and issues</strong></a> |
16 |
| - <a href="#more-supabase-examples"><strong>More Examples</strong></a> |
17 |
| -</p> |
18 |
| -<br/> |
| 5 | +First, run the development server: |
19 | 6 |
|
20 |
| -## Features |
| 7 | +```bash |
| 8 | +npm run dev |
| 9 | +# or |
| 10 | +yarn dev |
| 11 | +# or |
| 12 | +pnpm dev |
| 13 | +# or |
| 14 | +bun dev |
| 15 | +``` |
21 | 16 |
|
22 |
| -- Works across the entire [Next.js](https://nextjs.org) stack |
23 |
| - - App Router |
24 |
| - - Pages Router |
25 |
| - - Middleware |
26 |
| - - Client |
27 |
| - - Server |
28 |
| - - It just works! |
29 |
| -- supabase-ssr. A package to configure Supabase Auth to use cookies |
30 |
| -- Styling with [Tailwind CSS](https://tailwindcss.com) |
31 |
| -- Components with [shadcn/ui](https://ui.shadcn.com/) |
32 |
| -- Optional deployment with [Supabase Vercel Integration and Vercel deploy](#deploy-your-own) |
33 |
| - - Environment variables automatically assigned to Vercel project |
| 17 | +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. |
34 | 18 |
|
35 |
| -## Demo |
| 19 | +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. |
36 | 20 |
|
37 |
| -You can view a fully working demo at [demo-nextjs-with-supabase.vercel.app](https://demo-nextjs-with-supabase.vercel.app/). |
| 21 | +This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. |
38 | 22 |
|
39 |
| -## Deploy to Vercel |
| 23 | +## Learn More |
40 | 24 |
|
41 |
| -Vercel deployment will guide you through creating a Supabase account and project. |
| 25 | +To learn more about Next.js, take a look at the following resources: |
42 | 26 |
|
43 |
| -After installation of the Supabase integration, all relevant environment variables will be assigned to the project so the deployment is fully functioning. |
| 27 | +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. |
| 28 | +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. |
44 | 29 |
|
45 |
| -[](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+starter+configures+Supabase+Auth+to+use+cookies%2C+making+the+user%27s+session+available+throughout+the+entire+Next.js+app+-+Client+Components%2C+Server+Components%2C+Route+Handlers%2C+Server+Actions+and+Middleware.&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&stores=%5B%7B%22type%22%3A%22integration%22%2C%22integrationSlug%22%3A%22supabase%22%2C%22productSlug%22%3A%22supabase%22%7D%5D) |
| 30 | +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! |
46 | 31 |
|
47 |
| -The above will also clone the Starter kit to your GitHub, you can clone that locally and develop locally. |
| 32 | +## Deploy on Vercel |
48 | 33 |
|
49 |
| -If you wish to just develop locally and not deploy to Vercel, [follow the steps below](#clone-and-run-locally). |
| 34 | +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. |
50 | 35 |
|
51 |
| -## Clone and run locally |
52 |
| - |
53 |
| -1. You'll first need a Supabase project which can be made [via the Supabase dashboard](https://database.new) |
54 |
| - |
55 |
| -2. Create a Next.js app using the Supabase Starter template npx command |
56 |
| - |
57 |
| - ```bash |
58 |
| - npx create-next-app -e with-supabase |
59 |
| - ``` |
60 |
| - |
61 |
| -3. Use `cd` to change into the app's directory |
62 |
| - |
63 |
| - ```bash |
64 |
| - cd name-of-new-app |
65 |
| - ``` |
66 |
| - |
67 |
| -4. Rename `.env.local.example` to `.env.local` and update the following: |
68 |
| - |
69 |
| - ``` |
70 |
| - NEXT_PUBLIC_SUPABASE_URL=[INSERT SUPABASE PROJECT URL] |
71 |
| - NEXT_PUBLIC_SUPABASE_ANON_KEY=[INSERT SUPABASE PROJECT API ANON KEY] |
72 |
| - ``` |
73 |
| - |
74 |
| - 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) |
75 |
| - |
76 |
| -5. You can now run the Next.js local development server: |
77 |
| - |
78 |
| - ```bash |
79 |
| - npm run dev |
80 |
| - ``` |
81 |
| - |
82 |
| - The starter kit should now be running on [localhost:3000](http://localhost:3000/). |
83 |
| - |
84 |
| -6. This template comes with the default shadcn/ui style initialized. If you instead want other ui.shadcn styles, delete `components.json` and [re-install shadcn/ui](https://ui.shadcn.com/docs/installation/next) |
85 |
| - |
86 |
| -> Check out [the docs for Local Development](https://supabase.com/docs/guides/getting-started/local-development) to also run Supabase locally. |
87 |
| -
|
88 |
| -## Feedback and issues |
89 |
| - |
90 |
| -Please file feedback and issues over on the [Supabase GitHub org](https://github.com/supabase/supabase/issues/new/choose). |
91 |
| - |
92 |
| -## More Supabase examples |
93 |
| - |
94 |
| -- [Next.js Subscription Payments Starter](https://github.com/vercel/nextjs-subscription-payments) |
95 |
| -- [Cookie-based Auth and the Next.js 13 App Router (free course)](https://youtube.com/playlist?list=PL5S4mPUpp4OtMhpnp93EFSo42iQ40XjbF) |
96 |
| -- [Supabase Auth and the Next.js App Router](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs) |
| 36 | +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. |
0 commit comments