Use Supabase with Next.js

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

<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.Code>

  ```bash
  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>

  <$CodeTabs>

    ```text name=.env.local
    NEXT_PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
    NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_SUPABASE_PUBLISHABLE_KEY>
    ```

  </$CodeTabs>

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

</StepHikeCompact.Code>

Create a new file at `app/instruments/page.tsx` and populate with the following.

This selects all the rows from the `instruments` table in Supabase and render them on the page.

</StepHikeCompact.Details>

<StepHikeCompact.Code>

<$CodeTabs>

  ```ts name=app/instruments/page.tsx
  import { createClient } from "@/lib/supabase/server";
  import { Suspense } from "react";

  async function InstrumentsData() {
    const supabase = await createClient();
    const { data: instruments } = await supabase.from("instruments").select();

    return <pre>{JSON.stringify(instruments, null, 2)}</pre>;
  }

  export default function Instruments() {
    return (
      <Suspense fallback={<div>Loading instruments...</div>}>
        <InstrumentsData />
      </Suspense>
    );
  }
  ```

</$CodeTabs>

</StepHikeCompact.Code>

Run the development server, go to http://localhost:3000/instruments in a browser and you should see the list of instruments.

</StepHikeCompact.Details>

<StepHikeCompact.Code>

  ```bash Terminal
  npm run dev
  ```

</StepHikeCompact.Code>