next-js.mdc•1.58 kB
---
description:
globs:
alwaysApply: true
---
# Rules
always use functional react code. always write include typescript type annotations.
in nextjs, always use the App Router pattern not the Pages Router pattern.
always use shadcn ui components, if possible those already in our library or ask to install new ones.
use tailwind classes instead of CSS to style HTML elements if possible.
name handlers with the handle prefix, use descriptive variable names.
use early returns to make code more readable.
do not suggest in-line imports, move imports to the top of the page, unless instructed otherwise.
to run unit tests, always just run `npm run test` in the top level project folder.
don't include superfluous comments in the code, for example this is bad:
```typescript
// setting max retries to 3
const MAX_RETRIES = 3
```
always try to use all-cap const variables instead of magic numbers in the code.
```typescript
// bad:
if (retries > 3) {...}
// good:
const MAX_RETRIES = 3
if (retries > MAX_RETRIES) {...}
```
always be mindful of deleting tests and explicitly let the user know when you do so (ask for consent!).
## Structure
we're using `.ts` files. while we have to import files with `.js`, the files we edit have `.ts` or `.tsx` endings - NEVER SEARCH FOR THE JS files.
## AI SDK
Always use version 5 of the Vercel AI SDK
## Adding NPM Packages/Dependencies
Never add content to the dependencies part in the package.json file - always nagivate to the folder and use npm add or uninstall or something similar. Normally we want to use the latest version.