# Next.js (/en/docs/nextjs)

<DocsHero title="Build on Next.js" muted="with CoreMVP" description="The full app on the App Router: sign-in, Organizations, billing, a dashboard and an API, ready for Vercel." actions={[['Run locally', '/en/docs/nextjs/run-locally'], ['View demo', 'https://nextjs.coremvp.com/']]}>
  <Tabs items={['Run locally', 'Deploy to Vercel']}>
    <Tab value="Run locally">
      ```bash
      git clone https://github.com/coremvp/nextjs.git
      cd nextjs
      bun install --frozen-lockfile
      bunx supabase start
      ./coremvp env sync
      bun run dev   # http://localhost:3000
      ```
    </Tab>

    <Tab value="Deploy to Vercel">
      ```bash
      bunx vercel deploy --prod
      ```
    </Tab>
  </Tabs>
</DocsHero>

## In this section

<PageCards>
  <PageCard title="Run Locally" command="bun run dev" href="/en/docs/nextjs/run-locally" description="Start, stop, reset and test the app on your machine." facts={[['App', 'localhost:3000'], ['Database', 'Local Supabase'], ['Tests', 'bun run test']]} />

  <PageCard title="Configure Environment" command=".env.local" href="/en/docs/nextjs/configure-environment" description="Every setting, where it is read and what stays server-only." facts={[['Local file', '.env.local'], ['Browser values', 'NEXT_PUBLIC_*'], ['Refresh', './coremvp env sync']]} />

  <PageCard title="Project Structure" command="src/" href="/en/docs/nextjs/project-structure" description="Where to make the most common product changes." facts={[['Pages', 'src/app'], ['API', 'src/api'], ['Database', 'supabase/migrations']]} />
</PageCards>

## Jump straight in

<JumpIn>
  <JumpItem label="API route" title="Add an API route" description="A validated Hono route, mounted at /api and called from the browser on the same origin." points={['Zod request validation', 'Mounted at /api', 'Same file in both templates']} href="/en/docs/backend/create-api-endpoint">
    ```typescript title="src/api/routes/greeting.ts"
    import { Hono } from "hono";
    import { z } from "zod";
    import { validateQuery } from "@/api/validation";

    const greetingRoutes = new Hono();
    const query = z.strictObject({ name: z.string().min(1) });

    greetingRoutes.get("/greeting", validateQuery(query), (c) => {
      const { name } = c.req.valid("query");
      return c.json({ ok: true, greeting: `Hello, ${name}` });
    });

    export { greetingRoutes };
    ```
  </JumpItem>

  <JumpItem label="Database" title="Change the schema" description="Add a column with a Supabase migration and apply it to the local database." points={['Plain SQL migrations', 'Applied with the Supabase CLI', 'Checked into supabase/migrations']} href="/en/docs/database/change-schema">
    ```bash
    bunx supabase migration new add_project_description
    # alter table public.projects add column description text;
    bunx supabase migration up --local
    bunx supabase migration list --local
    ```
  </JumpItem>

  <JumpItem label="Billing" title="Test Stripe locally" description="Forward Stripe test events to the webhook route of your local app." points={['Stripe CLI in test mode', 'Signed webhook events', 'Same route in both templates']} href="/en/docs/billing/stripe/connect">
    ```bash
    stripe login
    stripe listen \
      --events product.created,product.updated,product.deleted,price.created,price.updated,price.deleted,checkout.session.completed,invoice.paid,customer.subscription.created,customer.subscription.updated,customer.subscription.deleted \
      --forward-to localhost:3000/api/webhooks/stripe
    ```
  </JumpItem>

  <JumpItem label="Deploy" title="Deploy to Vercel" description="Deploy the saved source to the linked Vercel project once hosted settings are in place." points={['Hosted Supabase', 'Vercel environment variables', 'Production test checklist']} href="/en/docs/deployment/vercel">
    ```bash
    bunx vercel deploy --prod
    ```
  </JumpItem>
</JumpIn>

## Explore the Next.js docs

<LinkColumns>
  <LinkColumn title="Start">
    * [Quickstart](/en/docs/quickstart)
    * [After Purchase](/en/docs/getting-started/after-purchase)
    * [Application Architecture](/en/docs/application-architecture)
  </LinkColumn>

  <LinkColumn title="Build">
    * [Authentication](/en/docs/authentication)
    * [Billing](/en/docs/billing)
    * [Database](/en/docs/database)
  </LinkColumn>

  <LinkColumn title="Ship">
    * [Deploy to Vercel](/en/docs/deployment/vercel)
    * [Hosted Environment Variables](/en/docs/deployment/environment-variables)
    * [Launch Your App](/en/docs/deployment/launch-app)
  </LinkColumn>
</LinkColumns>