frontend/nextjs-vercel
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: frontend:b37625007b06d8b01e89a8ac63b743ca9e067f0b
Branches Tags
frontend:main
...
compare: frontend:4c35335b646c3cf3a13bd843c54e4f92b237a7ba
Branches Tags
frontend:main

2 Commits
b37625007b ... 4c35335b64

Author SHA1 Message Date
Rami Bitar
4c35335b64 Migrate to next 16.2.10 2026-07-17 15:05:00 -04:00
Rami Bitar
d919ec4788 Remove AGENTS.md and CLAUDE.md 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0184B4PAd3uXhcJ6Hfrptkdg
 2026-07-02 22:07:20 -04:00
8 changed files with 8266 additions and 5830 deletions
Expand all files Collapse all files

78
AGENTS.md
View File

@@ -1,78 +0,0 @@
You are a software developer building a web application using Next.js, Tailwind CSS, and Shadcn.
# SANDBOX ENVIRONMENT
The preview website is operating in a browser-based sandboxed environment, so some features may not always be available.
- To install packages modify the package.json file directly and dependencies will be installed
- Use lucide icons or @reactremix/icon for icons
- In the sandbox environment packages will resolve using esm.sh
- In the sandbox environment Tailwind is installed automatically via the Tailwind CDN, so some Tailwind features may not be available — avoid exotic Tailwind classes to be safe
- The browser sandbox environment does support API routes, server components, and streaming (such as with the Vercel AI SDK)
# STYLE GUIDE
- Always use Tailwind CSS for styling via a globals.css file
- Sample globals.css setup:
```css
import "tailwindcss"
import "tw-animate-css"
@custom-variant dark (&:is(.dark *));
@theme {
--color-background: hsl(0 0% 100%);
--color-foreground: hsl(222.2 84% 4.9%);
--color-primary: hsl(222.2 47.4% 11.2%);
--color-primary-foreground: hsl(210 40% 98%);
--color-secondary: hsl(210 40% 96.1%);
--color-secondary-foreground: hsl(222.2 47.4% 11.2%);
--color-muted: hsl(210 40% 96.1%);
--color-muted-foreground: hsl(215.4 16.3% 46.9%);
--color-accent: hsl(210 40% 96.1%);
--color-accent-foreground: hsl(222.2 47.4% 11.2%);
--color-destructive: hsl(0 84.2% 60.2%);
--color-destructive-foreground: hsl(210 40% 98%);
--color-border: hsl(214.3 31.8% 91.4%);
--color-input: hsl(214.3 31.8% 91.4%);
--color-ring: hsl(222.2 84% 4.9%);
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
}
```
## Fonts
Do not use `next/font`. Load fonts with `@font-face` directly in `app/globals.css` and wire them to the theme tokens.
1. Add a `@font-face` block per family at the top of `app/globals.css`. Use the variable woff2 from Google's CDN (`fonts.gstatic.com`) with a weight range so one file covers all weights:
```css
@font-face {
font-family: 'Geist';
font-display: swap;
font-style: normal;
font-weight: 300 700;
src: url('https://fonts.gstatic.com/s/geist/v5/gyByhwUxId8gMEwcGFWNOITd.woff2') format('woff2');
}
```
2. Point the theme tokens at the family names inside `@theme inline`:
```css
@theme inline {
--font-sans: 'Geist', sans-serif;
--font-mono: 'Geist Mono', monospace;
--font-heading: 'Geist', sans-serif;
}
```
3. Keep `app/layout.tsx` free of font imports — `<html>` only needs `className="font-sans"` (applied via the base layer) and the fonts resolve from CSS.
To swap a font, grab the latin woff2 URL from the Google Fonts CSS API (e.g. `https://fonts.googleapis.com/css2?family=Outfit:wght@300..700&display=swap`) and replace the `font-family` name and `src` URL above.
## Vercel AI
You can build agentic applications using API routes with the Vercel `ai` v6 SDK.
- When using this package you must use zod.
- The Vercel AI SDK depends on zod v3. Pin zod to version `3.25.76` — do NOT install zod v4 or higher, as it conflicts with the Vercel AI SDK v6 packages.

78
CLAUDE.md
View File

@@ -1,78 +0,0 @@
You are a software developer building a web application using Next.js, Tailwind CSS, and Shadcn.
# SANDBOX ENVIRONMENT
The preview website is operating in a browser-based sandboxed environment, so some features may not always be available.
- To install packages modify the package.json file directly and dependencies will be installed
- Use lucide icons or @reactremix/icon for icons
- In the sandbox environment packages will resolve using esm.sh
- In the sandbox environment Tailwind is installed automatically via the Tailwind CDN, so some Tailwind features may not be available — avoid exotic Tailwind classes to be safe
- The browser sandbox environment does support API routes, server components, and streaming (such as with the Vercel AI SDK)
# STYLE GUIDE
- Always use Tailwind CSS for styling via a globals.css file
- Sample globals.css setup:
```css
import "tailwindcss"
import "tw-animate-css"
@custom-variant dark (&:is(.dark *));
@theme {
--color-background: hsl(0 0% 100%);
--color-foreground: hsl(222.2 84% 4.9%);
--color-primary: hsl(222.2 47.4% 11.2%);
--color-primary-foreground: hsl(210 40% 98%);
--color-secondary: hsl(210 40% 96.1%);
--color-secondary-foreground: hsl(222.2 47.4% 11.2%);
--color-muted: hsl(210 40% 96.1%);
--color-muted-foreground: hsl(215.4 16.3% 46.9%);
--color-accent: hsl(210 40% 96.1%);
--color-accent-foreground: hsl(222.2 47.4% 11.2%);
--color-destructive: hsl(0 84.2% 60.2%);
--color-destructive-foreground: hsl(210 40% 98%);
--color-border: hsl(214.3 31.8% 91.4%);
--color-input: hsl(214.3 31.8% 91.4%);
--color-ring: hsl(222.2 84% 4.9%);
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
}
```
## Fonts
Do not use `next/font`. Load fonts with `@font-face` directly in `app/globals.css` and wire them to the theme tokens.
1. Add a `@font-face` block per family at the top of `app/globals.css`. Use the variable woff2 from Google's CDN (`fonts.gstatic.com`) with a weight range so one file covers all weights:
```css
@font-face {
font-family: 'Geist';
font-display: swap;
font-style: normal;
font-weight: 300 700;
src: url('https://fonts.gstatic.com/s/geist/v5/gyByhwUxId8gMEwcGFWNOITd.woff2') format('woff2');
}
```
2. Point the theme tokens at the family names inside `@theme inline`:
```css
@theme inline {
--font-sans: 'Geist', sans-serif;
--font-mono: 'Geist Mono', monospace;
--font-heading: 'Geist', sans-serif;
}
```
3. Keep `app/layout.tsx` free of font imports — `<html>` only needs `className="font-sans"` (applied via the base layer) and the fonts resolve from CSS.
To swap a font, grab the latin woff2 URL from the Google Fonts CSS API (e.g. `https://fonts.googleapis.com/css2?family=Outfit:wght@300..700&display=swap`) and replace the `font-family` name and `src` URL above.
## Vercel AI
You can build agentic applications using API routes with the Vercel `ai` v6 SDK.
- When using this package you must use zod.
- The Vercel AI SDK depends on zod v3. Pin zod to version `3.25.76` — do NOT install zod v4 or higher, as it conflicts with the Vercel AI SDK v6 packages.

1
instrumentation.ts Normal file
View File

@@ -0,0 +1 @@
export function register() {}

34
next.config.js Normal file
View File

@@ -0,0 +1,34 @@
module.exports = {
reactStrictMode: true,
typescript: {
ignoreBuildErrors: true,
},
images: {
unoptimized: true,
remotePatterns: [
{
protocol: "https",
hostname: "images.unsplash.com",
},
{
protocol: "https",
hostname: "cdn.shopify.com",
},
{
protocol: "https",
hostname: "**.frontend.co",
},
],
},
experimental: {
reactDebugChannel: false,
},
webpack: (config, { isServer }) => {
config.cache = { type: "memory" };
if (isServer) {
config.optimization = config.optimization || {};
config.optimization.splitChunks = false;
}
return config;
},
};

7
next.config.ts
View File

@@ -1,7 +0,0 @@
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
};
export default nextConfig;

11
package.json
View File

@@ -3,13 +3,15 @@
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"dev": "next dev --webpack",
"build": "next build --webpack",
"start": "next start",
"lint": "eslint"
},
"dependencies": {
"@base-ui/react": "^1.6.0",
"@next/swc-wasm-web": "16.2.10",
"@remixicon/react": "^4.9.0",
"@shadcn/react": "^0.1.0",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
@@ -18,7 +20,7 @@
"embla-carousel-react": "^8.6.0",
"input-otp": "^1.4.2",
"lucide-react": "^1.22.0",
"next": "16.2.9",
"next": "16.2.10",
"next-themes": "^0.4.6",
"radix-ui": "^1.6.0",
"react": "19.2.4",
@@ -40,5 +42,6 @@
"eslint-config-next": "16.2.9",
"tailwindcss": "^4",
"typescript": "^5"
}
},
"packageManager": "yarn@4.14.1+sha512.64df448055b2d37ba269d7db535a469b8da93f8ef1140c25fd7a83c00a8fbaacb214ca0e02553b92a2c54cef78bb67d0b4817fab02001df0e24fac0faccc3b42"
}

4
postcss.config.mjs
View File

@@ -1,7 +1,5 @@
const config = {
export default {
plugins: {
"@tailwindcss/postcss": {},
},
};
export default config;

13883
yarn.lock
View File

File diff suppressed because it is too large Load Diff