### What?
Upgrade with-supabase example to be compatible with Next.js 16
### Why?
1. Users get console warnings about middleware vs proxy
2. Enabling Cache Components config results in build errors for async
behaviour outside Suspense boundary
3. Turbopack flag is default and therefore, no longer necessary on `npm
run dev`
### How?
1. Renamed all instances of `middleware` to `proxy`
2. Wraped async behaviour in Suspense boundaries
3. Removed --turbopack flag from `npm run dev`
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Closes#84734
Fixes environmental variable names in `with-supabase` example README to
match the actual `.env.example` file.
Updates `NEXT_PUBLIC_SUPABASE_ANON_KEY` to
`NEXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY` in two locations.
---------
Co-authored-by: Joseph <joseph.chamochumbi@vercel.com>
### What?
This PR removes the automatic ESLint linting that previously ran during `next build`. The documentation has been updated to reflect this change.
### Why?
As part of Next.js 16, we're removing the automatic build-time linting that was previously included in the build process. This gives developers more control over when linting runs by explicitly invoking their linter via npm scripts.
### How?
- Updated documentation to clarify that automatic build-time linting has been removed in Next.js 16
- Removed the `runLint` parameter and related linting code from the build process
- Removed the `verifyAndLint.ts` file which is no longer needed
- Simplified type checking code by removing lint-related functionality
- Removed ESLint telemetry during builds
## What
This PR updates
`examples/with-supabase/components/tutorial/fetch-data-steps.tsx` to
include a missing step about enabling Row Level Security (RLS) and
creating a simple read policy for the `notes` table.
Fixes: #82218
## Why
Currently, the tutorial shows how to:
- create a `notes` table
- insert data
- query data from Next.js
However, since RLS is enabled by default in Supabase, new users will get
`permission denied` errors when querying data unless they configure
policies.
The official Supabase Next.js quickstart docs already mention this:
https://supabase.com/docs/guides/getting-started/quickstarts/nextjs
Adding this step will help newcomers understand why RLS is required and
how to set it up.
## Changes
- Added a new `<TutorialStep>` in `fetch-data-steps.tsx`:
- Explains that RLS is enabled by default
- Shows SQL snippet to enable RLS + create a public read policy
- Links to the Supabase RLS docs
## Checklist
- [x] Added RLS tutorial step
- [x] Verified formatting matches other tutorial steps
- [x] Added links to relevant Supabase docs
Co-authored-by: Joseph <joseph.chamochumbi@vercel.com>
Updates the `with-supabase` example to use the new and much faster (when
project is configured with asymmetric JWT support)
`supabase.auth.getClaims()` function instead of `getUser()`.
---------
Co-authored-by: Benjamin Woodruff <benjamin.woodruff@vercel.com>
This PR updates the `with-supabase` template to better auth pages,
Tailwind v4 and newest `components.json` for full compatibility with
shadcn/ui.
The `(auth-pages)` folder has been removed. For auth, the template is
now using the [password based auth
block](https://supabase.com/ui/docs/nextjs/password-based-auth) from the
Supabase UI Library which makes it easier to update it and keep it
up-to-date.
---------
Co-authored-by: Lee Robinson <lee@leerob.com>
This pull request removes duplication of a utility function within the
`with-supabase` example as mentioned in the following issue #73942 - I
removed the duplicated code from the `utils` directory as when shadcn
installs a new component, that component will look for the helper
function in `lib/utils.ts` and forcing users to update every component
after installation or modify any config files for shadcn seems like a
worse DX.
- Fixes https://github.com/vercel/next.js/issues/73942
---------
Co-authored-by: samcx <sam@vercel.com>
## What?
Update examples `.gitignore` files for parity with [Yarn's official
recommendations](https://v3.yarnpkg.com/getting-started/qa#which-files-should-be-gitignored),
accounting for Yarn's modern Plug-n-Play functionality.
## Why?
New projects initialized with `create-next-app` presently add various
extraneous files from the Yarn cache to the initial commit. This is most
notable in the case of the Next SWC binary, which may exceed 100M in
some environments (empirically, 64-bit Darwin and WSL2 Ubuntu, and very
probably other unix/linux environments), and prevent users from pushing
their new projects to free GitHub repositories without rewriting the
commit history to exclude the extraneous files, or unnecessarily setting
up Git LFS to include them.
## How?
I have errored on the side of exclusion to enable users to push their
CNA projects to GitHub as-is and for parity with other package managers,
while still providing the opportunity to opt in to additional
functionality provided by modern Yarn.
These changes follow the recommendations for
**non**-[Zero-Install](https://yarnpkg.com/features/caching#zero-installs)
configurations, as Zero-Install functionality is an extension on top of
the base package manager experience, and may necessitate additional
configuration and present additional complications for unsuspecting
users, so I think it's best left up to the user to opt-in. On account of
the majority of publicly available Next.js-based projects comprising
general consumer-facing websites, it is my belief that the majority of
Next projects would not benefit from Yarn's Zero-Install functionality,
and that explicitly facilitating it by default would break status quo
with all other non-Yarn CNA projects.
Contrary to the example `.gitignore`s provided by Yarn, I've excluded
the `.yarn/sdks` directory as it contains IDE-specific tooling; I feel
it would be presumptuous for an environmentally-agnostic tool to target
and provide package-manager-specific tooling for specific editors. This
too should be left to the user to opt-in to and provide for their
project if they deem necessary.
I have retained the current `.gitignore`'s exclusion of the `/.pnp`
directory for backwards compatibility with older versions of Yarn (the
files therein have since been reallocated to the `.yarn` directory
addressed by these changes, but I am not clear on when that delineation
occurred or the prevalence of Yarn installations which depend on the
former convention). Maintaining the exclusion here, in the worst case,
implies additional downloads (on an order of magnitude merely similar to
using npm from the outset) rather than failure.
CC: @samcx
### Adding or Updating Examples
- [x] The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`.
See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md
Co-authored-by: Sam Ko <sam@vercel.com>
## Why?
There is a type issue with one of the form actions.
```
app/(auth-pages)/sign-up/page.tsx:42:25 - error TS2322: Type '(formData: FormData) => Promise<{ error: string; }>' is not assignable to type 'string | ((formData: FormData) => void | Promise<void>) | undefined'.
Type '(formData: FormData) => Promise<{ error: string; }>' is not assignable to type '(formData: FormData) => void | Promise<void>'.
Type 'Promise<{ error: string; }>' is not assignable to type 'void | Promise<void>'.
Type 'Promise<{ error: string; }>' is not assignable to type 'Promise<void>'.
Type '{ error: string; }' is not assignable to type 'void'.
42 <SubmitButton formAction={signUpAction} pendingText="Signing up...">
```
- x-ref: https://github.com/vercel/next.js/discussions/72778
Remove stores param as new integration does not support initializing a
schema. This change basically reverts back to the url that was used
prior to the new integration last week, which still works just fine.
Co-authored-by: JJ Kasper <jj@jjsweb.site>
### What?
Installing shadcn/ui after installing this example was a bad experience.
Running `npx shadcn-ui@latest init` overwrites existing files causing
errors and a confusing start.
This allows a installing shadcn/ui without these issues.
Co-authored-by: Sam Ko <sam@vercel.com>
### What?
[1] Add protected page
[2] Add pending state
### Why?
[1] People using incorrect ways to protect pages
[2] No feedback that the login page is doing anything when buttons
clicked
### How?
[1] Redirect user to protected page after successful authentication
[2] Use useFormStatus to determine whether the form is in a pending
state
---------
Co-authored-by: Sam Ko <sam@vercel.com>
### What?
[1] Clean up `with-supabase` example following patterns from @leerob's
recent video on authentication
[2] Add images to matcher to reduce number of times a session is
refreshed
[3] Move instantiation of `cookieStore` into Supabase server helper
### Why?
[1] Make template easier to understand and use
[2] Reduce likelihood users will receive Auth Rate Limit Exceeded error
[3] Makes creating a Supabase client much simpler in Server Components,
Route Handlers and Server Actions
### How?
[1] Refactor middleware and its helper function
[2] Add image extensions to middleware matcher
[3] Call `cookies()` function from `createClient` helper - this should
still be in the [same execution
context](https://nextjs.org/docs/messages/dynamic-server-error) and
appears to work from my testing, but would be good to get the 👍 from
someone at Vercel
### What?
Enhancement of _with-supabase example_. Replacing in **middelware.ts**,
**supabase.auth.getSession()** with **supabase.auth.getUser()**
### Why?
**Never trust supabase.auth.getSession() inside server code such as
middleware**. It isn't guaranteed to revalidate the Auth token.
**It's safe to trust getUser()** because it sends a request to the
Supabase Auth server every time to revalidate the Auth token.
[Setting up Server-Side Auth for
Next.js](https://supabase.com/docs/guides/auth/server-side/nextjs)
### Adding or Updating Examples
I can't import `useFormState` from `react-dom` with
`@types/react-dom@18.2.5`, so I upgrade it to the latest version of it.
---------
Co-authored-by: Sam Ko <sam@vercel.com>
## Description
This PR ensures that the default prettier config is used for examples
and templates.
This config is compatible with `prettier@3` as well (upgrading prettier
is bigger change that can be a future PR).
## Changes
- Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will
be needed upgrading to prettier@3)
- Added `examples/.prettierrc.json` with default config (this will
change every example)
- Added `packages/create-next-app/templates/.prettierrc.json` with
default config (this will change every template)
## Related
- Fixes#54402
- Closes#54409
### What?
[1] Use Server Actions for auth
[2] Use Geist font
[3] Address warning about `metadataBase` in console
### Why?
[1] The co-location of Login page and authentication logic is simpler for beginners
[2] Looks nice
[3] Avoid confusing people with the starter template printing warnings
### How?
[1] Refactor Route Handlers to Server Actions
[2] Install font and set to `html`
[3] Explicitly declare the default value for `metadataBaseUrl`
### What?
[1] Simplify example
[2] Refactor `delete` method to use `cookies.set`
### Why?
[1] Make it easier to follow
[2] Fix build errors
### How?
[1] Adding comments and abstracting code into helper functions
[2] Setting cookie to empty value when removed
---------
Co-authored-by: Lee Robinson <me@leerob.io>
### What?
Move calling the `cookies` function up to the route
### Why?
This flags the route as `dynamic`, meaning we don't need to explicitly declare `export const dynamic = 'force-dynamic'`
### How?
Passing the returned `cookieStore` into Supabase helper functions, rather than the `cookies` function itself
### What?
[1] Use camelCase for SVG properties
[2] Catch expected error in cookie functions
### Why?
[1] Prints error to the console
[2] If the cookies `set` or `delete` methods are called in a Server Component, an error is thrown
### How?
[1] Change property names from kebab-case to camelCase
[2] Catch error
### What?
[1] Refactors `with-supabase` example to use new `@supabase/ssr` package
[2] Makes landing page dynamic steps to connect Next.js to Supabase
[3] Fixes a range of small bugs
### Why?
[1] Simplifies creating a Supabase client
[2] People were not understanding how to connect this template to Supabase
[3] People don't like bugs
### How?
[1] Declares a separate `createClient` function for client and server. Client version is used in Client Components, server version is used every where else - Server Components, Route Handlers, Server Actions, Middleware
[2] Makes landing page a dynamic list of next steps to guide the user to success
[3] Writing code to squash the bugs!
### Reason for making this change
https://yarnpkg.com/getting-started/qa#:~:text=yarn%2Finstall%2Dstate.,your%20workspaces%20all%20over%20again.
In the official documentation of `yarn`, it is stated that `.yarn/install-state.gz` is an optimization file that developer shouldn't ever have to commit. However, currently, when running `create-next-app`, `.yarn/install-state.gz` is being commited.
### Remaining work
I apologize for only modifying one template initially to initiate the discussion first.
If this change is agreed upon, it should be synchronized with other `.gitignore` templates. Would it be possible to follow a similar approach as in https://github.com/vercel/next.js/pull/47241? I would appreciate any assistance in syncing this change.
### What?
- added correct deploy button urls
- uses new supabase integration
- updated readme for local development, more clearer instructions
- added opengraph image
### Why?
- old supabase integration is buggy
- readme is more clear for local development
---------
Co-authored-by: Steven Tey <stevensteel97@gmail.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
### What?
1. Refactor `with-supabase` example to use server-side auth
### Why?
1. It is the recommended path for Next.js, and can serve as an example for the authentication docs
### How?
1. Move authentication methods from Client Component to Route Handlers
### What?
Stop `with-supabase` template from throwing errors on build
### Why?
Dynamic Routes now fail the build, rather than console.logging an error
### How?
Export the following from any routes that use the `cookies` function
```
export const dynamic = "force-dynamic";
```
Install `encoding` as a dev dependency until this is fixed downstream
### What?
Adds `supabase-js` as dependency for `with-supabase` example
### Why?
`with-supabase` example is missing `supabase-js` dependency, which is a
peer dependency of `@supabase/auth-helpers-nextjs`
### How?
Adds `supabase-js` to `examples/with-supabase/package.json`
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Jon Meyers