# Next.js + shadcn + Tailwind

Used by the [build playbook](https://www.ihatereading.lol/build.md) on ihatereading.lol.

### Next.js + shadcn + Tailwind

Kind: app

Official links:

- [Next.js App Router](https://nextjs.org/docs/app)
- [Route Handlers](https://nextjs.org/docs/app/building-your-application/routing/route-handlers)
- [Environment variables](https://nextjs.org/docs/app/building-your-application/configuring/environment-variables)
- [shadcn install (Next.js)](https://ui.shadcn.com/docs/installation/next)
- [shadcn components](https://ui.shadcn.com/docs/components)
- [Tailwind v3 + Next.js](https://v3.tailwindcss.com/docs/guides/nextjs)
- [Vercel deploy](https://vercel.com/docs/getting-started-with-vercel)
- [Vercel env vars](https://vercel.com/docs/projects/environment-variables)

npm packages:

- `next`
- `react`
- `tailwindcss`
- `class-variance-authority`
- `lucide-react`

API keys:

- `NEXT_PUBLIC_SITE_URL`: Your public origin, e.g. http://localhost:3000 or https://yourdomain.com

Setup:

```
npx create-next-app@latest . --ts --tailwind --app --src-dir
npx shadcn@latest init
npx shadcn@latest add button input card badge
```


All platforms: https://www.ihatereading.lol/build/platforms.md