-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9d5a9f8
commit cb3c61b
Showing
37 changed files
with
128 additions
and
1,023 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,93 +1,34 @@ | ||
<a href="https://demo-nextjs-with-supabase.vercel.app/"> | ||
<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"> | ||
<h1 align="center">Next.js and Supabase Starter Kit</h1> | ||
</a> | ||
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). | ||
|
||
<p align="center"> | ||
The fastest way to build apps with Next.js and Supabase | ||
</p> | ||
## Getting Started | ||
|
||
<p align="center"> | ||
<a href="#features"><strong>Features</strong></a> · | ||
<a href="#demo"><strong>Demo</strong></a> · | ||
<a href="#deploy-to-vercel"><strong>Deploy to Vercel</strong></a> · | ||
<a href="#clone-and-run-locally"><strong>Clone and run locally</strong></a> · | ||
<a href="#feedback-and-issues"><strong>Feedback and issues</strong></a> | ||
<a href="#more-supabase-examples"><strong>More Examples</strong></a> | ||
</p> | ||
<br/> | ||
First, run the development server: | ||
|
||
## Features | ||
```bash | ||
npm run dev | ||
# or | ||
yarn dev | ||
``` | ||
|
||
- 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 | ||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. | ||
|
||
## Demo | ||
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. | ||
|
||
You can view a fully working demo at [demo-nextjs-with-supabase.vercel.app](https://demo-nextjs-with-supabase.vercel.app/). | ||
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. | ||
|
||
## Deploy to Vercel | ||
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. | ||
|
||
Vercel deployment will guide you through creating a Supabase account and project. | ||
## Learn More | ||
|
||
After installation of the Supabase integration, all relevant environment variables will be assigned to the project so the deployment is fully functioning. | ||
To learn more about Next.js, take a look at the following resources: | ||
|
||
[](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) | ||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. | ||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. | ||
|
||
The above will also clone the Starter kit to your GitHub, you can clone that locally and develop locally. | ||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! | ||
|
||
If you wish to just develop locally and not deploy to Vercel, [follow the steps below](#clone-and-run-locally). | ||
## Deploy on Vercel | ||
|
||
## Clone and run locally | ||
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. | ||
|
||
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) | ||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
module.exports = { | ||
presets: ['next/babel'], | ||
plugins: [['react-native-web', { commonjs: true }]], | ||
}; |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.