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

Preliminary instructions. 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_HOSTNAME 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, Table, 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).
• TanStack Query: Data fetching library (docs).
  • configured for build time pre-fetching and rehydrating
  • sample implementation of optimistic updates
• Sentry: Error tracking and performance monitoring (docs).
• React Hotkeys Hook: Hotkeys (docs).
• Tanstack Table: Headless UI for building powerful tables & datagrids. (docs).
  • drag and drop row reordering based on example
• dnd-kit: A modular toolkit for building drag & drop interfaces.(docs).

Hooks

• useDialog: Open/close dialog management with type-safe dialog data reference via Zustand.

Components

• ConfirmationDialog: Reusable confirmation alert with callbacks.
• DataTable: shadcn/ui based data table with drag and drop re-ordering and row action menu.
• NavItem: Menu entry with current path highlighting.

Helpers

• roles.ts: Basic role-based access controls.
• adminProtectedAction: Wrapper function for calling admin user only server actions.
• /api/revalidate: Trigger revalidatePath or revalidateTag for on-demand ISR revalidation.
• siteUrl: Derive site URL from VERCEL_URL or SITE_HOSTNAME/SITE_PROTOCOL.