chore(docs): update nextjs slack clone (supabase#30894)

* chore(docs): wip update nextjs slack

* chore: polish configtoml

* chore: add next.config.js

* chore: setup for valid nextjs deploy

Author: avallete

examples/slack-clone/nextjs-slack-clone/.env.example

@@ -1,4 +1,6 @@
 # Get these from your API settings: https://supabase.com/dashboard/project/_/settings/api
 
-NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
-NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
+NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321/
+NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
+NEXT_SITE_URL=http://localhost:3000
+NEXT_REDIRECT_URLS=http://localhost:3000/

examples/slack-clone/nextjs-slack-clone/.env.production.example

@@ -0,0 +1,6 @@
+# Get these from your API settings: https://supabase.com/dashboard/project/_/settings/api
+NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
+# Get this from your Vercel project settings
+NEXT_SITE_URL=https://<your-vercel-project-name>.<your-vercel-org-name>.vercel.app/
+NEXT_REDIRECT_URLS=https://<your-vercel-project-name>.<your-vercel-org-name>.vercel.app/,https://<your-vercel-project-name>.<your-vercel-org-name>.vercel.app/**

examples/slack-clone/nextjs-slack-clone/.gitignore

@@ -18,7 +18,8 @@
 # misc
 .DS_Store
 .env*
-!.env.local.example
+!.env.example
+!.env.production.example
 
 # debug
 npm-debug.log*

examples/slack-clone/nextjs-slack-clone/README.md

@@ -3,7 +3,7 @@
 This is a full-stack Slack clone example using:
 
 - Frontend:
-  - Next.js.
+  - [Next.js](https://github.com/vercel/next.js) - a React framework for production.
   - [Supabase.js](https://supabase.com/docs/library/getting-started) for user management and realtime data syncing.
 - Backend:
   - [supabase.com/dashboard](https://supabase.com/dashboard/): hosted Postgres database with restful API for usage with Supabase.js.
@@ -14,7 +14,13 @@ This is a full-stack Slack clone example using:
 
 ![Demo animation gif](./public/slack-clone-demo.gif)
 
-## Deploy your own
+## Deploy with Vercel
+
+The Vercel deployment will guide you through creating a Supabase account and project. After installation of the Supabase integration, all relevant environment variables will be set up so that the project is usable immediately after deployment 🚀
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsupabase%2Fsupabase%2Ftree%2Fmaster%2Fexamples%2Fslack-clone%2Fnextjs-slack-clone&project-name=supabase-nextjs-slack-clone&repository-name=supabase-nextjs-slack-clone&integration-ids=oac_VqOgBHqhEoFTPzGkPd7L0iH6&external-id=https%3A%2F%2Fgithub.com%2Fsupabase%2Fsupabase%2Ftree%2Fmaster%2Fexamples%2Fslack-clone%2Fnextjs-slack-clone)
+
+## Build from scratch
 
 ### 1. Create new project
 
@@ -36,62 +42,49 @@ The `anon` key is your client-side API key. It allows "anonymous access" to your
 
 **_NOTE_**: The `service_role` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
 
-### 4. Deploy the Next.js client
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fsupabase%2Fsupabase%2Ftree%2Fmaster%2Fexamples%2Fslack-clone%2Fnextjs-slack-clone&env=NEXT_PUBLIC_SUPABASE_URL,NEXT_PUBLIC_SUPABASE_ANON_KEY&envDescription=Find%20the%20Supabase%20URL%20and%20key%20in%20the%20your%20auto-generated%20docs%20at%20supabase.com/dashboard&project-name=supabase-slack-clone&repo-name=supabase-slack-clone)
-
-Here, we recommend forking this repo so you can deploy through Vercel by clicking the button above. When you click the button, replace the repo URL with your fork's URL.
-
-You will be asked for a `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY`. Use the API URL and `anon` key from [step 3](#3-get-the-url-and-key).
-
-### 5. Change authentication settings if necessary
-
-![Change auth settings](https://user-images.githubusercontent.com/1811651/101840012-39be3800-3af8-11eb-8c32-73f2fae6299e.png)
-
-On [supabase.com/dashboard](https://supabase.com/dashboard), you can go to Authentication -> Settings to change your auth settings for your project if necessary. Here, you can change the site URL, which is used for determining where to redirect users after they confirm their email addresses or attempt to use a magic link to log in.
-
-Here, you can also enable external oauth providers, such as Google and GitHub.
-
-## How to use
+## Supabase details
 
-### Using this repo
+### Using a Remote Supabase Project
 
-Simply clone this repo locally and proceed to the next section.
+1. Create or select a project on [Supabase Dashboard](https://supabase.com/dashboard).
+2. Copy and fill the dotenv template `cp .env.production.example .env.production`
+3. Link the local project and merge the local configuration with the remote one:
 
-### Required configuration
+```bash
+SUPABASE_ENV=production npx supabase@latest link --project-ref <your-project-ref>
+```
 
-Copy the `.env.example` file into a file named `.env.local` in the root directory of the example:
+3. Sync the configuration:
 
 ```bash
-cp .env.example .env.local
+SUPABASE_ENV=production npx supabase@latest config push
 ```
 
-Set your Supabase details from [step 3](#3-get-the-url-and-key) above:
+4. Sync the database schema:
 
 ```bash
-NEXT_PUBLIC_SUPABASE_URL=<replace-with-your-API-url>
-NEXT_PUBLIC_SUPABASE_ANON_KEY=<replace-with-your-anon-key>
+SUPABASE_ENV=production npx supabase@latest db push
 ```
 
-### Change authentication settings if necessary
+## Vercel Preview with Branching
 
-Follow [Step #5](#5-change-authentication-settings-if-necessary) above if you want to change the auth settings.
+Supabase integrates seamlessly with Vercel's preview branches, giving each branch a dedicated Supabase project. This setup allows testing database migrations or service configurations safely before applying them to production.
 
-### Run the development server
+### Steps
 
-Now install the dependencies and start the development server.
+1. Ensure the Vercel project is linked to a Git repository.
+2. Configure the "Preview" environment variables in Vercel:
 
-```bash
-npm install
-npm run dev
-# or
-yarn
-yarn dev
-```
+   - `NEXT_PUBLIC_SUPABASE_URL`
+   - `NEXT_PUBLIC_SUPABASE_ANON_KEY`
 
-Visit http://localhost:3000 and start chatting! Open a channel across two browser tabs to see everything getting updated in realtime 🥳
+3. Create a new branch, make changes (e.g., update `max_frequency`), and push the branch to Git.
+   - Open a pull request to trigger Vercel + Supabase integration.
+   - Upon successful deployment, the preview environment reflects the changes.
 
-## Supabase details
+![Preview Checks](https://github.com/user-attachments/assets/db688cc2-60fd-4463-bbed-e8ecc11b1a39)
+
+---
 
 ### Role-based access control (RBAC)
 

examples/slack-clone/nextjs-slack-clone/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig

examples/slack-clone/nextjs-slack-clone/supabase/config.toml

@@ -8,7 +8,7 @@ enabled = true
 port = 54321
 # Schemas to expose in your API. Tables, views and stored procedures in this schema will get API
 # endpoints. public and storage are always included.
-schemas = ["public", "storage", "graphql_public"]
+schemas = ["public"]
 # Extra schemas to add to the search_path of every request. public is always included.
 extra_search_path = ["public", "extensions"]
 # The maximum number of rows returns from a view, table, or stored procedure. Limits payload size
@@ -24,52 +24,21 @@ shadow_port = 54320
 # server_version;` on the remote database to check.
 major_version = 15
 
-[db.pooler]
-enabled = false
-# Port to use for the local connection pooler.
-port = 54329
-# Specifies when a server connection can be reused by other clients.
-# Configure one of the supported pooler modes: `transaction`, `session`.
-pool_mode = "transaction"
-# How many server connections to allow per user/database pair.
-default_pool_size = 20
-# Maximum number of client connections allowed.
-max_client_conn = 100
-
 [realtime]
 enabled = true
 # Bind realtime via either IPv4 or IPv6. (default: IPv6)
 # ip_version = "IPv6"
 
-[studio]
-enabled = true
-# Port to use for Supabase Studio.
-port = 54323
-# External URL of the API server that frontend connects to.
-api_url = "http://127.0.0.1"
-
-# Email testing server. Emails sent with the local dev setup are not actually sent - rather, they
-# are monitored, and you can view the emails that would have been sent from the web interface.
-[inbucket]
-enabled = true
-# Port to use for the email testing server web interface.
-port = 54324
-# Uncomment to expose additional ports for testing user applications that send emails.
-# smtp_port = 54325
-# pop3_port = 54326
-
-[storage]
-enabled = true
-# The maximum file size allowed (e.g. "5MB", "500KB").
-file_size_limit = "50MiB"
-
 [auth]
 enabled = true
 # The base URL of your website. Used as an allow-list for redirects and for constructing URLs used
 # in emails.
-site_url = "http://127.0.0.1:3000"
+site_url = "env(NEXT_SITE_URL)"
 # A list of *exact* URLs that auth providers are permitted to redirect to post authentication.
-additional_redirect_urls = ["https://127.0.0.1:3000"]
+additional_redirect_urls = [
+    # Will be localhost:3000 in development or the URL of your deployed app in production.
+    "env(NEXT_REDIRECT_URLS)",
+]
 # How long tokens are valid for, in seconds. Defaults to 3600 (1 hour), maximum 604,800 (1 week).
 jwt_expiry = 3600
 # If disabled, the refresh token will never expire.
@@ -87,46 +56,27 @@ enable_signup = true
 # addresses. If disabled, only the new email is required to confirm.
 double_confirm_changes = true
 # If enabled, users need to confirm their email address before signing in.
-enable_confirmations = false
-
-# Uncomment to customize email template
-# [auth.email.template.invite]
-# subject = "You have been invited"
-# content_path = "./supabase/templates/invite.html"
+enable_confirmations = true
+# If enabled, users will need to reauthenticate or have logged in recently to change their password.
+secure_password_change = false
+# Controls the minimum amount of time that must pass before sending another signup confirmation or password reset email.
+max_frequency = "1m0s"
+# Number of characters used in the email OTP.
+otp_length = 6
+# Number of seconds before the email OTP expires (defaults to 1 hour).
+otp_expiry = 3600
 
-[auth.sms]
-# Allow/disallow new user signups via SMS to your project.
-enable_signup = true
-# If enabled, users need to confirm their phone number before signing in.
-enable_confirmations = false
-# Template for sending OTP to users
-template = "Your code is {{ .Code }} ."
-
-# Use pre-defined map of phone number to OTP for testing.
-[auth.sms.test_otp]
-# 4152127777 = "123456"
-
-# Configure one of the supported SMS providers: `twilio`, `twilio_verify`, `messagebird`, `textlocal`, `vonage`.
-[auth.sms.twilio]
-enabled = false
-account_sid = ""
-message_service_sid = ""
-# DO NOT commit your Twilio auth token to git. Use environment variable substitution instead:
-auth_token = "env(SUPABASE_AUTH_SMS_TWILIO_AUTH_TOKEN)"
-
-# Use an external OAuth provider. The full list of providers are: `apple`, `azure`, `bitbucket`,
-# `discord`, `facebook`, `github`, `gitlab`, `google`, `keycloak`, `linkedin`, `notion`, `twitch`,
-# `twitter`, `slack`, `spotify`, `workos`, `zoom`.
-[auth.external.apple]
-enabled = false
-client_id = ""
-# DO NOT commit your OAuth provider secret to git. Use environment variable substitution instead:
-secret = "env(SUPABASE_AUTH_EXTERNAL_APPLE_SECRET)"
-# Overrides the default auth redirectUrl.
-redirect_uri = ""
-# Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
-# or any other third-party OIDC providers.
-url = ""
+# Email testing server. Emails sent with the local dev setup are not actually sent - rather, they
+# are monitored, and you can view the emails that would have been sent from the web interface.
+[inbucket]
+enabled = true
+# Port to use for the email testing server web interface.
+port = 54324
+# Uncomment to expose additional ports for testing user applications that send emails.
+# smtp_port = 54325
+# pop3_port = 54326
+# admin_email = "[email protected]"
+# sender_name = "Admin"
 
 # Enable auth hooks
 # https://supabase.com/docs/guides/auth/auth-hooks#local-development
@@ -136,20 +86,3 @@ uri = "pg-functions://postgres/public/custom_access_token_hook"
 
 [analytics]
 enabled = false
-port = 54327
-vector_port = 54328
-# Configure one of the supported backends: `postgres`, `bigquery`.
-backend = "postgres"
-
-# Experimental features may be deprecated any time
-[experimental]
-# Configures Postgres storage engine to use OrioleDB (S3)
-orioledb_version = ""
-# Configures S3 bucket URL, eg. <bucket_name>.s3-<region>.amazonaws.com
-s3_host = "env(S3_HOST)"
-# Configures S3 bucket region, eg. us-east-1
-s3_region = "env(S3_REGION)"
-# Configures AWS_ACCESS_KEY_ID for S3 bucket
-s3_access_key = "env(S3_ACCESS_KEY)"
-# Configures AWS_SECRET_ACCESS_KEY for S3 bucket
-s3_secret_key = "env(S3_SECRET_KEY)"