feat: upgrade to Next.js 16 and add shadcn/ui components

README.md

@@ -2,15 +2,22 @@ Step-by-step guide to set up a production-ready Next.js project for 2025. Every
 step is optional and can be skipped if not needed or swapped for a different 
 tool depending on the project requirements.
 
-Selected tools:
-- Next.js with TypeScript, using App Router
-- Tailwind CSS for styling
-- Biome for linting and formatting
-- Husky and lint-staged for pre-commit hooks
-- GitHub Actions for CI
-- Vitest and React Testing Library for unit and integration tests
-- Playwright for E2E tests
-- Storybook for component development and documentation
+## Tech Stack
+
+- **Next.js 16.1** with TypeScript, using App Router
+- **Tailwind CSS 3.4** for styling (v4 not compatible with Turbopack)
+- **shadcn/ui** for component library
+- **Biome 2.3** for linting and formatting
+- **Husky** and **lint-staged** for pre-commit hooks
+- **GitHub Actions** for CI
+- **Vitest** and **React Testing Library** for unit and integration tests
+- **Playwright** for E2E tests
+- **Storybook** for component development and documentation
+
+## Known Issues
+
+### Tailwind CSS v4 Compatibility
+Tailwind CSS v4 is currently **not compatible with Next.js 16 + Turbopack**. This project uses **Tailwind CSS v3.4** instead. When Tailwind v4 support improves, consider upgrading.
 
 ## (1) Next.js init
 

biome.json

@@ -1,13 +1,12 @@
 {
-    "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+    "$schema": "https://biomejs.dev/schemas/2.3.10/schema.json",
     "vcs": {
         "enabled": false,
         "clientKind": "git",
         "useIgnoreFile": false
     },
     "files": {
-        "ignoreUnknown": false,
-        "ignore": ["**/mockServiceWorker.js"]
+        "ignoreUnknown": false
     },
     "formatter": {
         "enabled": true,
@@ -18,13 +17,13 @@
         "lineWidth": 80,
         "attributePosition": "auto"
     },
-    "organizeImports": {
-        "enabled": true
-    },
     "linter": {
         "enabled": true,
         "rules": {
-            "recommended": true
+            "recommended": true,
+            "suspicious": {
+                "noUnknownAtRules": "off"
+            }
         }
     },
     "javascript": {
@@ -39,5 +38,10 @@
             "quoteStyle": "single",
             "attributePosition": "auto"
         }
+    },
+    "css": {
+        "parser": {
+            "tailwindDirectives": true
+        }
     }
 }

components.json

@@ -1,21 +1,22 @@
 {
-    "$schema": "https://ui.shadcn.com/schema.json",
-    "style": "new-york",
-    "rsc": true,
-    "tsx": true,
-    "tailwind": {
-        "config": "tailwind.config.ts",
-        "css": "src/app/globals.css",
-        "baseColor": "zinc",
-        "cssVariables": true,
-        "prefix": ""
-    },
-    "aliases": {
-        "components": "@/components",
-        "utils": "@/lib/utils",
-        "ui": "@/components/ui",
-        "lib": "@/lib",
-        "hooks": "@/hooks"
-    },
-    "iconLibrary": "lucide"
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
 }