Decent Next.js Starter Template

Quickly start a new Next.js project with defaults for UI components, layout, database setup and more.

By Joost Schuur (Twitter, Threads).

(Very) early work in progress. More to come.

Usage

Not much here yet, but if you're taking an early look, start by cloning the repository:

git clone https://github.com/jschuur/decent-nextjs-starter-template

1. Install dependencies: pnpm install.
2. Rename decent-nextjs-starter-template in package.json to your project name.
3. Optionally set up Turso. Local development will work fine without it.
4. Copy .env.example to .env and fill in the values as desired.
5. Run pnpm dev to start the development server. Visit http://localhost:3000.
6. With the dev server running, run pnpm run db:migrate to set up the database. The dev script also runs the local Turso database instance. You can also run pnpm run dev:db:turso to run that separately.
7. Populate the sample data with pnpm run db:seed. Refresh the local page to see the stack list loaded from the database.
8. For SST based live development, set up your AWS credentials manually in ~/aws/credentials or via their CLI. If you don't want to use SST just yet, you can run local dev via pnpm run dev-nosst.
9. For Auth.js, set up credentials for the Google Provider for AUTH_GOOGLE_ID and AUTH_GOOGLE_SECRET (or update auth.ts to use a different one). Don't forget the random AUTH_SECRET string.
10. Test auth via the login button in the header. If you see an error, you might not have set the correct URLs for your Google OAuth credentials for 'Authorized JavaScript origins' (http://localhost:3000) and 'Authorized redirect URIs' (http://localhost:3000/api/auth/callback/google).
11. To deploy, run pnpm run deploy (for a staging build) or pnpm run deploy:prod. This deploys to AWS via SST. Cloudflare deploys are also supported by SST Ion. Or use the Vercel CLI to deploy to Vercel. Create preview and production env files under .env.preview and .env.production respectively. Set a SITE_DOMAIN to define the hostname for the site.

Substitute pnpm for your package manager of choice (npm, bun, yarn etc).

Stack

• Next.js React framework, configured for Tailwind, TypeScript, ESlint and app router (docs).
• shadcn/ui Accessible, customisable UI components based on Radix. Default style. Slate base colour with CSS variables for colour, by shadcn (docs).
  • Pre-installed components: Alert, Avatar, Badge, Button, Card, Checkbox, Command, Dialog, Form, Input, Label, Popover, Radio Group, Select, Sonner, Switch, Tabs, Textarea, Tooltip
  • VS Code extensions: shadcn/ui (by Suhel Makkad), shadcn/ui snippets (by Neeraj Dalal).
  • More at awesome-shadcn-ui.
• React Hook Form: Performant, flexible and extensible forms with easy-to-use validation (docs).
• Zod: TypeScript-first schema validation with static type inference.
• Drizzle: Database ORM with TypeScript support (docs).
  • Configured for Turso for local and production SQLite databases (docs).
  • Extensions: Drizzle ORM snippets (VS Code) by Manuel Gil, Drizzle Studio Chrome.
• SST (Ion): Deployment framework for AWS/Cloudflare with OpenNext support (docs).
• T3 Env: Type-safe environment variables (docs).
• Auth.js: Authentication library (docs).
  • via Drizzle adapter
• Google Analytics: Via @next/third-parties (docs).
• Sentry: Error tracking and performance monitoring (docs)