Use Supabase Auth with Next.js

Head over to [database.new](https://database.new) and create a new Supabase project.

Your new database has a table for storing your users. You can see that this table is currently empty by running some SQL in the [SQL Editor](/dashboard/project/_/sql/new).

</StepHikeCompact.Details>

<StepHikeCompact.Code>

 ```sql name=SQL_EDITOR
  select * from auth.users;
  ````

</StepHikeCompact.Code>

<StepHikeCompact.Details title="Create a Next.js app">

Use the `create-next-app` command and the `with-supabase` template, to create a Next.js app pre-configured with:
- [Cookie-based Auth](/docs/guides/auth/server-side/creating-a-client?queryGroups=package-manager&package-manager=npm&queryGroups=framework&framework=nextjs&queryGroups=environment&environment=server)
- [TypeScript](https://www.typescriptlang.org/)
- [Tailwind CSS](https://tailwindcss.com/)

<$Partial path="uiLibCta.mdx" />

</StepHikeCompact.Details>

<StepHikeCompact.Code>

  ```bash name=Terminal
  npx create-next-app -e with-supabase
  ```

</StepHikeCompact.Code>

    Rename `.env.example` to `.env.local` and populate with your Supabase connection variables:

    <ProjectConfigVariables variable="url" />
    <ProjectConfigVariables variable="publishable" />


</StepHikeCompact.Details>

<StepHikeCompact.Code>

  ```text name=.env.local
  NEXT_PUBLIC_SUPABASE_URL=your-project-url
  NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_... or anon key
  ```

  <$Partial path="api_settings_steps.mdx" variables={{ "framework": "nextjs", "tab": "frameworks" }} />

</StepHikeCompact.Code>

Start the development server, go to http://localhost:3000 in a browser, and you should see the contents of `app/page.tsx`.

To sign up a new user, navigate to http://localhost:3000/auth/sign-up, and click `Sign up`.

</StepHikeCompact.Details>

<StepHikeCompact.Code>

  ```bash name=Terminal
  npm run dev
  ```

</StepHikeCompact.Code>