feat: upgrade next.js and react versions to latest

Author: rafa-thayto

CLAUDE.md

@@ -0,0 +1,128 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a personal blog and portfolio website built with Next.js (Pages Router), TypeScript, and Tailwind CSS. The site features MDX-based blog posts in Portuguese and English, with analytics integration (PostHog, Google Analytics, GTM, Microsoft Clarity).
+
+## Development Commands
+
+### Running the project
+
+- `pnpm dev` - Start development server
+- `pnpm build` - Build for production
+- `pnpm start` - Start production server
+- `pnpm lint` - Run ESLint
+- `pnpm check-types` - Run TypeScript type checking without emitting files
+
+### Testing
+
+- `pnpm test` - Run Jest tests
+- `pnpm test:watch` - Run Jest in watch mode
+- `pnpm test -- path/to/file.spec.tsx` - Run a single test file
+- Test files use `.spec.tsx` naming convention
+
+### Note on Package Manager
+
+This project uses `pnpm` as the package manager (see `packageManager` field in package.json).
+
+## Architecture & Key Patterns
+
+### Blog System Architecture
+
+The blog is powered by MDX files stored in the `/posts` directory. The system uses:
+
+- **MDX Processing**: Uses `next-mdx-remote` for serializing MDX content with plugins:
+  - `remark-gfm` for GitHub Flavored Markdown
+  - `rehype-slug` and `rehype-autolink-headings` for auto-generated heading anchors
+  - `rehype-prism` for syntax highlighting
+- **Post Utilities** (`src/utils/mdx.ts`): Central location for MDX processing logic
+  - `getPosts()` - Fetches all posts and sorts by date
+  - `getMdxSerializedPost(slug)` - Serializes a single post for rendering
+  - `getPreviousOrNextPostBySlug(slug, type)` - Gets adjacent posts for navigation
+
+### Pages Structure (Next.js Pages Router)
+
+- `/src/pages/index.tsx` - Home page with recent posts
+- `/src/pages/blog/index.tsx` - Blog listing page
+- `/src/pages/blog/[slug].tsx` - Individual blog post (dynamic route using MDX)
+- `/src/pages/linktree.tsx` - Social links page
+- `/src/pages/about.tsx` - About page
+
+### Styling System
+
+- Uses Tailwind CSS with custom typography plugin configuration
+- Custom fonts: Poppins (sans) and Lora (serif) loaded via `next/font/google`
+- Dark mode support via `darkMode: 'class'` in Tailwind config
+- Extensive typography customization in `tailwind.config.js` for MDX content rendering
+
+### Component Organization
+
+Components follow a feature-based structure in `/src/components`:
+
+- Each component has its own directory with index file
+- `MDXImage.tsx` - Custom image component for MDX with Next.js Image optimization
+- `CodeBlock` and `Pre` - Custom code rendering components
+- `Layout` - Main layout wrapper
+- `ui/` - Reusable UI components (shadcn/ui style)
+
+### Analytics Integration
+
+Multiple analytics providers are initialized in `_app.tsx`:
+
+- PostHog (product analytics)
+- Google Analytics (via gtag)
+- Google Tag Manager
+- Microsoft Clarity
+
+All analytics IDs are configured via environment variables (see `.env.example`).
+
+### Path Aliases
+
+TypeScript and build tools use `@/*` to alias `src/*` (configured in `tsconfig.json` and `jest.config.js`).
+
+### Content Security & SEO
+
+- Security headers configured in `next.config.js` (HSTS, XSS protection, frame options, etc.)
+- Structured data for SEO using JSON-LD schema
+- `next-seo` for OpenGraph and Twitter Card metadata
+- RSS feed generation via `next-sitemap` (runs on `postbuild`)
+- Sitemap automatically generated after build
+
+### Image Optimization
+
+- Uses `@plaiceholder/next` for blur placeholder generation
+- Custom utility for processing images in `/src/utils/images.ts`
+- To create tiny blur placeholders: `ffmpeg -i <FILENAME>.<EXTENSION> -vf scale=20:-1 <FILENAME>-small.<EXTENSION>`
+
+### Git Workflow
+
+- Uses Husky for git hooks
+- Commitizen for conventional commits (`cz-conventional-changelog`)
+- Lint-staged runs ESLint and Prettier on staged files
+- Commitlint enforces conventional commit messages
+
+### Functional Programming
+
+Uses `fp-ts` library for functional programming patterns (see `src/utils/mdx.ts` for examples with Option and Array utilities).
+
+## Common Patterns
+
+### Adding a New Blog Post
+
+1. Create a new `.mdx` file in `/posts` directory
+2. Include frontmatter with: `title`, `description`, `publishedTime`, `modifiedTime`, `tags`, `href`, `image` object (with `src`, `placeholder`, `type`), `reactionsLength`, `commentsLength`
+3. The post will automatically appear on the blog index and home page (sorted by date)
+
+### Working with MDX Components
+
+Custom MDX components are defined in `/src/pages/blog/[slug].tsx`:
+
+- `pre` → Custom `Pre` component
+- `code` → Custom `CodeBlock` component
+- `img` / `Image` → Custom `MDXImage` component
+
+### Extending Analytics
+
+To add tracking events, use PostHog's `posthog.capture()` method (PostHog is initialized globally in `_app.tsx`).

eslint.config.mjs

@@ -0,0 +1,11 @@
+import { defineConfig } from "eslint/config";
+import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default defineConfig([{
+    extends: [...nextCoreWebVitals],
+}]);

next.config.js

@@ -1,6 +1,5 @@
 //@ts-check
 
-// eslint-disable-next-line
 // @typescript-eslint/no-var-requires
 const withMDX = require('@next/mdx')({
   extension: /\.mdx?$/,
@@ -17,7 +16,6 @@ const { withPlaiceholder } = require('@plaiceholder/next')
  * @type {import('next').NextConfig}
  **/
 const nextConfig = {
-  swcMinify: true,
   reactStrictMode: true,
   images: {
     remotePatterns: [

package.json

@@ -8,61 +8,58 @@
     "start": "next start",
     "test": "jest",
     "test:watch": "jest --watch",
-    "lint": "next lint",
+    "lint": "eslint .",
     "check-types": "tsc --noEmit",
     "prepare": "husky install",
     "postbuild": "next-sitemap"
   },
   "dependencies": {
-    "@fec/remark-a11y-emoji": "^3.1.0",
-    "@headlessui/react": "^1.7.3",
+    "@fec/remark-a11y-emoji": "^4.0.2",
+    "@headlessui/react": "^2.2.9",
     "@heroicons/react": "^2.0.12",
-    "@mapbox/rehype-prism": "^0.8.0",
     "@mdx-js/loader": "^2.1.5",
     "@mdx-js/react": "^2.1.5",
-    "@next/mdx": "^13.0.4",
+    "@next/mdx": "16.0.7",
     "@plaiceholder/next": "^2.5.0",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tailwindcss/postcss": "^4.1.8",
     "@types/lodash": "^4.17.17",
     "@types/matter-js": "^0.19.8",
     "@types/rss": "^0.0.32",
-    "@vercel/analytics": "^0.1.3",
+    "@vercel/analytics": "^1.6.1",
     "autoprefixer": "^10.4.20",
     "class-variance-authority": "^0.7.1",
     "clsx": "^1.2.1",
     "core-js": "^3.6.5",
     "fp-ts": "^2.13.1",
     "glob": "^8.0.3",
     "gray-matter": "^4.0.3",
-    "hastscript": "^7.1.0",
+    "hastscript": "^9.0.1",
     "lodash": "^4.17.21",
     "lucide-react": "^0.474.0",
     "marked": "^4.1.1",
     "matter-js": "^0.20.0",
     "motion": "^12.16.0",
     "nanoid": "^4.0.0",
-    "next": "14.2.29",
-    "next-mdx-remote": "^4.1.0",
+    "next": "16.0.7",
+    "next-mdx-remote": "^5.0.0",
     "next-seo": "^5.8.0",
     "next-sitemap": "^3.1.29",
     "plaiceholder": "^2.5.0",
     "poly-decomp": "^0.3.0",
     "postcss": "^8.5.4",
     "posthog-js": "^1.187.2",
-    "react": "18",
-    "react-confetti": "^6.1.0",
-    "react-dom": "18",
+    "react": "19.2.1",
+    "react-confetti": "^6.4.0",
+    "react-dom": "19.2.1",
     "react-syntax-highlighter": "^15.5.0",
     "react-use": "^17.5.1",
     "regenerator-runtime": "0.13.7",
-    "rehype-autolink-headings": "^6.1.1",
-    "rehype-slug": "^5.0.1",
-    "rehype-stringify": "^9.0.3",
-    "remark-gfm": "^3.0.1",
-    "remark-parse": "^10.0.1",
-    "remark-rehype": "^10.1.0",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-prism-plus": "^2.0.1",
+    "rehype-slug": "^6.0.0",
+    "remark-gfm": "^4.0.1",
     "rss": "^1.2.2",
     "sharp": "^0.31.2",
     "svg-path-commander": "^2.1.11",
@@ -77,39 +74,39 @@
     "@swc-node/register": "^1.4.2",
     "@swc/core": "^1.2.173",
     "@tailwindcss/typography": "^0.5.16",
+    "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "13.4.0",
+    "@testing-library/react": "16.3.0",
     "@types/glob": "^8.0.0",
     "@types/jest": "29.2.3",
     "@types/node": "18.11.9",
-    "@types/react": "18.0.25",
-    "@types/react-dom": "18.0.9",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
     "@types/react-syntax-highlighter": "^15.5.5",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^8.48.1",
+    "@typescript-eslint/parser": "^8.48.1",
     "babel-jest": "29.3.1",
     "cypress": "^11.2.0",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "8.28.0",
-    "eslint-config-next": "14.2.29",
+    "eslint": "^9.39.1",
+    "eslint-config-next": "16.0.7",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jsx-a11y": "6.6.1",
-    "eslint-plugin-react": "7.31.11",
-    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "7.0.1",
     "husky": "^8.0.1",
-    "jest": "28.1.1",
-    "jest-environment-jsdom": "28.1.1",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
     "lint-staged": "^13.0.3",
     "prettier": "^2.6.2",
-    "react-test-renderer": "18.2.0",
     "rehype-prism": "link:@types/@mapbox/rehype-prism",
     "remark-a11y-emoji": "link:@types/@fec/remark-a11y-emoji",
-    "ts-jest": "28.0.5",
+    "ts-jest": "29.4.6",
     "ts-node": "10.9.1",
     "tw-animate-css": "^1.3.3",
-    "typescript": "4.9.3"
+    "typescript": "5.9.3"
   },
   "config": {
     "commitizen": {
@@ -125,5 +122,11 @@
       "prettier --write"
     ]
   },
-  "packageManager": "pnpm@9.15.0"
+  "packageManager": "pnpm@9.15.0",
+  "pnpm": {
+    "overrides": {
+      "@types/react": "19.2.7",
+      "@types/react-dom": "19.2.3"
+    }
+  }
 }