Next.js
Build on Next.js with CoreMVP
The full app on the App Router: sign-in, Organizations, billing, a dashboard and an API, ready for Vercel.
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:3000bunx vercel deploy --prodIn this section
Run Locally
bun run dev
Start, stop, reset and test the app on your machine.
- App
- localhost:3000
- Database
- Local Supabase
- Tests
- bun run test
Configure Environment
.env.local
Every setting, where it is read and what stays server-only.
- Local file
- .env.local
- Browser values
- NEXT_PUBLIC_*
- Refresh
- ./coremvp env sync
Project Structure
src/
Where to make the most common product changes.
- Pages
- src/app
- API
- src/api
- Database
- supabase/migrations
Jump straight in
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 };Add an API route
A validated Hono route, mounted at /api and called from the browser on the same origin.
- Zod request validation
- Mounted at /api
- Same file in both templates
bunx supabase migration new add_project_description
# alter table public.projects add column description text;
bunx supabase migration up --local
bunx supabase migration list --localChange the schema
Add a column with a Supabase migration and apply it to the local database.
- Plain SQL migrations
- Applied with the Supabase CLI
- Checked into supabase/migrations
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/stripeTest Stripe locally
Forward Stripe test events to the webhook route of your local app.
- Stripe CLI in test mode
- Signed webhook events
- Same route in both templates
bunx vercel deploy --prodDeploy to Vercel
Deploy the saved source to the linked Vercel project once hosted settings are in place.
- Hosted Supabase
- Vercel environment variables
- Production test checklist
Explore the Next.js docs
Build
Was this page helpful?