Precedent

Building blocks for your Next project

Introduction · One-click Deploy · Tech Stack + Features · Author

Introduction

Precedent is an opinionated collection of components, hooks, and utilities for your Next.js project.

One-click Deploy

You can deploy this template to Vercel with the button below:

You can also clone & create this repo locally with the following command:

npx create-next-app precedent --example "https://github.com/steven-tey/precedent"

Then, install the dependencies with your package manager of choice:
```
npm i
yarn
pnpm i
```
If you got 'prisma' is not recognized as an internal or external command, try npm install @prisma/cli.

If you got:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: precedent@0.1.0
npm ERR! Found: next@13.5.5-canary.19
npm ERR! node_modules/next
npm ERR!   next@"13.5.5-canary.19" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^12.2.5 || ^13" from next-auth@4.22.1
npm ERR! node_modules/next-auth
npm ERR!   next-auth@"4.22.1" from the root project
npm ERR!   peer next-auth@"^4" from @next-auth/prisma-adapter@1.0.7
npm ERR!   node_modules/@next-auth/prisma-adapter
npm ERR!     @next-auth/prisma-adapter@"^1.0.7" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Try this to solve it: npx prisma then npx prisma generate. Check out here to see more related to this issue.

Last, if you got:

pnpm: The term 'pnpm' is not recognized as a name of a cmdlet, function, script file, or executable program.

You need to install pnpm by npm install -g pnpm and run npx prisma generate again.

Now you can finally run npm run dev to start!

Note

If you need to add/install new package, use pnpm install <THEPACKAGE>/pnpm add <THEPACKAGE>/pnpm i <THEPACKAGE> instead.

Tech Stack + Features

Precedent.mp4

Frameworks

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

Platforms

Vercel – Easily preview & deploy changes with git
Vercel Postgres – Serverless Postgres at the Edge

UI

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 performance
ImageResponse – Generate dynamic Open Graph images at the edge

Hooks and Utilities

useIntersectionObserver – React hook to observe when an element enters or leaves the viewport
useLocalStorage – Persist data in the browser's local storage
useScroll – React hook to observe scroll position (example)
nFormatter – Format numbers with suffixes like 1.2k or 1.2M
capitalize – Capitalize the first letter of a string
truncate – Truncate a string to a specified length
use-debounce – Debounce a function call / state update

Code Quality

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

Miscellaneous

Vercel Analytics – Track unique visitors, pageviews, and more in a privacy-friendly way

Resources

Dictionary API – Get word definitions
Image and Video API – Access to the full Pexels content library, including photos, videos

Author

Steven Tey (@steventey)
Hsiang (@...)

chienhsiang-hung/VocabHero