Building blocks for your Next project
Introduction · One-click Deploy · Tech Stack + Features · Author
Precedent is an opinionated collection of components, hooks, and utilities for your Next.js project created by @steventey.
This is the fork to demonstrate how to use TiDB Serverless with Next.js.
You can deploy this template to Vercel with the button below:
You can also clone & create this repo locally with the following command:
pnpm create next-app precedent --example "https://github.com/likidu/precedent"
Then, install the dependencies with your package manager, we recommend pnpm:
pnpm i
Provision the database schema with the following command:
pnpm prisma db push
Finally, run the development server:
pnpm run dev
Precedent.mp4
- Next.js – React framework for building performant apps with the best developer experience
- Auth.js – Handle user authentication with ease with providers like Google, Twitter, GitHub, etc.
- Prisma – Typescript-first ORM for Node.js
- Vercel – Easily preview & deploy changes with git
- TiDB Serverless – Serverless cloud database that is MySQL compatible
- Tailwind CSS – Utility-first CSS framework for rapid UI development
- Radix – Primitives like modal, popover, etc. to build a stellar user experience
- Framer Motion – Motion library for React to animate components with ease
- Lucide – Beautifully simple, pixel-perfect icons
next/font
– Optimize custom fonts and remove external network requests for improved performanceImageResponse
– Generate dynamic Open Graph images at the edge
useIntersectionObserver
– React hook to observe when an element enters or leaves the viewportuseLocalStorage
– Persist data in the browser's local storageuseScroll
– React hook to observe scroll position (example)nFormatter
– Format numbers with suffixes like1.2k
or1.2M
capitalize
– Capitalize the first letter of a stringtruncate
– Truncate a string to a specified lengthuse-debounce
– Debounce a function call / state update
- TypeScript – Static type checker for end-to-end typesafety
- Prettier – Opinionated code formatter for consistent code style
- ESLint – Pluggable linter for Next.js and TypeScript
- Vercel Analytics – Track unique visitors, pageviews, and more in a privacy-friendly way
- Steven Tey (@steventey)