supabase/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx

---
title: 'Use Supabase with Next.js'
subtitle: 'Learn how to create a Supabase project, add some sample data, and query from a Next.js app.'
breadcrumb: 'Framework Quickstarts'
---

<AiPrompt id="nextjs" />

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

## 3. 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/), and [Tailwind CSS](https://tailwindcss.com/).

```bash
npx create-next-app@latest my-app -e with-supabase
```

## 4. Set up AI tooling (optional)

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

## 5. Declare Supabase environment variables

Rename `.env.example` to `.env.local` and populate with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=nextjs&connectTab=frameworks).

<Button variant="primary" asChild>
  <a href="/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=nextjs">
    Open Connect panel
  </a>
</Button>

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

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

## 6. Allow public access to the instruments page

The `with-supabase` template redirects unauthenticated visitors to the sign-in page for most routes. The `instruments` table is publicly readable, so update `lib/supabase/proxy.ts` to skip that redirect for `/instruments`.

Find this `if` statement:

```ts name=lib/supabase/proxy.ts
  if (
    request.nextUrl.pathname !== "/" &&
    !user &&
    !request.nextUrl.pathname.startsWith("/login") &&
    !request.nextUrl.pathname.startsWith("/auth")
  ) {
```

Add a condition for `/instruments`:

```ts name=lib/supabase/proxy.ts
  if (
    request.nextUrl.pathname !== "/" &&
    !user &&
    !request.nextUrl.pathname.startsWith("/login") &&
    !request.nextUrl.pathname.startsWith("/auth") &&
    request.nextUrl.pathname !== "/instruments" &&
    !request.nextUrl.pathname.startsWith("/instruments/")
  ) {
```

## 7. Query Supabase data from Next.js

The `with-supabase` template already installs `@supabase/supabase-js` and `@supabase/ssr` and creates the clients for you, in `lib/supabase/client.ts` for the browser and `lib/supabase/server.ts` for Server Components. The code below imports the server client from there.

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

This selects all the rows from the `instruments` table you created earlier and renders them on the page.

<$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, error } = await supabase.from("instruments").select();

  if (error) {
    return <p>Error loading instruments: {error.message}</p>;
  }

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

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

</$CodeTabs>

## 8. Start the app

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

```bash
npm run dev
```

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

## Next steps

- Set up [Auth](/docs/guides/auth) for your app
- [Insert more data](/docs/guides/database/import-data) into your database
- Upload and serve static files using [Storage](/docs/guides/storage)
- Explore [drop-in UI components](/ui) for your Supabase app