chore: update nextjs and tailwindcss #284
Conversation
Reviewer's Guide by SourceryThis pull request upgrades Next.js to v15 and Tailwind CSS to v4. It also includes necessary configuration and dependency updates to ensure compatibility with the new versions. Class diagram showing configuration changesclassDiagram
class PostCSSConfig {
+plugins: Object
}
note for PostCSSConfig "Changed from multiple plugins to single @tailwindcss/postcss"
class TSConfig {
+compilerOptions: Object
+include: String[]
+exclude: String[]
}
note for TSConfig "Updated paths aliases and compiler options"
class PackageJSON {
+dependencies: Object
+devDependencies: Object
+scripts: Object
}
note for PackageJSON "Updated versions and removed eslint config"
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
WalkthroughThe pull request introduces significant updates to a Next.js project, focusing on migrating from a custom content management approach to using Velite. The changes span multiple configuration files, updating import statements, dependency versions, and build configurations. The primary modifications involve transitioning data imports from Changes
Possibly related PRs
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey @zce - I've reviewed your changes - here's some feedback:
Overall Comments:
- This PR includes an upgrade to React 19 which hasn't been officially released yet. Please stick to stable releases for production dependencies.
- Consider splitting this into separate PRs for Next.js and Tailwind CSS upgrades to make the changes more manageable and easier to review/rollback if needed.
- Please document the migration steps and any breaking changes being addressed, particularly around the removed Velite webpack configuration and ESLint setup.
Here's what I looked at during the review
- 🟡 General issues: 1 issue found
- 🟢 Security: all looks good
- 🟢 Testing: all looks good
- 🟢 Complexity: all looks good
- 🟢 Documentation: all looks good
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
| @@ -1,6 +1,6 @@ | |||
| # Next.js + MDX + Velite | |||
|
|
|||
| A template with Next.js 13 app dir, [Velite](https://github.com/zce/velite), Tailwind CSS and dark mode. | |||
| A template with Next.js 15 app dir, [Velite](https://github.com/zce/velite), Tailwind CSS and dark mode. | |||
There was a problem hiding this comment.
nitpick (typo): Possible typo: 'A' should be 'a'.
The first word of the sentence 'A template...' might be better as 'a template...'.
| A template with Next.js 15 app dir, [Velite](https://github.com/zce/velite), Tailwind CSS and dark mode. | |
| a template with Next.js 15 app dir, [Velite](https://github.com/zce/velite), Tailwind CSS and dark mode. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🔭 Outside diff range comments (1)
examples/nextjs/app/posts/[slug]/page.tsx (1)
Add HTML sanitization to prevent XSS vulnerabilities
The content processing pipeline in Velite currently allows raw HTML without sanitization. This, combined with
dangerouslySetInnerHTML, could expose the application to XSS attacks. Consider:
- Adding
rehype-sanitizeto the rehype plugins invelite.config.ts- Configuring appropriate sanitization rules to allow only safe HTML elements and attributes
Example locations:
examples/nextjs/velite.config.ts: Add sanitization to the markdown configexamples/nextjs/app/posts/[slug]/page.tsx: Content rendering withdangerouslySetInnerHTML🔗 Analysis chain
Line range hint
28-28: Verify content sanitization for XSS prevention.The use of
dangerouslySetInnerHTMLcould expose the application to XSS attacks if the content isn't properly sanitized.Let's check if Velite handles content sanitization:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for sanitization configuration in Velite setup rg -A 5 "sanitize|xss|html" .velite.tsLength of output: 91
Script:
#!/bin/bash # Find Velite configuration files and content processing fd -e ts -e js velite rg -l "velite" . rg -A 5 "markdown|content|html|sanitize|xss" --type ts --type jsLength of output: 20680
🧹 Nitpick comments (2)
examples/nextjs/readme.md (1)
Line range hint
11-26: Consider optimizing npm scripts for better DX.The current script setup requires running multiple commands in parallel. Consider using Next.js's built-in support for watch mode plugins to simplify the development workflow.
Here's a suggested optimization:
{ "scripts": { - "dev:content": "velite --watch", - "build:content": "velite --clean", - "dev:next": "next dev", - "build:next": "next build", - "dev": "run-p dev:*", - "build": "run-s build:*", + "dev": "next dev", + "build": "velite --clean && next build", "start": "next start" } }examples/nextjs/tsconfig.json (1)
3-3: Consider using a more recent JavaScript target.Next.js 15 supports modern browsers by default. Using
ES2017as the target might unnecessarily transpile modern JavaScript features.- "target": "ES2017", + "target": "ES2020",
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (10)
examples/nextjs/app/[slug]/page.tsx(1 hunks)examples/nextjs/app/globals.css(2 hunks)examples/nextjs/app/page.tsx(1 hunks)examples/nextjs/app/posts/[slug]/page.tsx(1 hunks)examples/nextjs/package.json(1 hunks)examples/nextjs/postcss.config.js(1 hunks)examples/nextjs/readme.md(1 hunks)examples/nextjs/tailwind.config.js(0 hunks)examples/nextjs/tsconfig.json(1 hunks)package.json(3 hunks)
💤 Files with no reviewable changes (1)
- examples/nextjs/tailwind.config.js
✅ Files skipped from review due to trivial changes (2)
- examples/nextjs/app/page.tsx
- examples/nextjs/app/[slug]/page.tsx
🔇 Additional comments (4)
examples/nextjs/postcss.config.js (1)
2-2:⚠️ Potential issueFix PostCSS configuration issues.
The current configuration has several issues that need to be addressed:
- The package name
@tailwindcss/postcssappears incorrect. The standard package istailwindcss.autoprefixeris missing, which is required for cross-browser compatibility and is a peer dependency of Tailwind CSS.Apply this diff to fix the configuration:
- plugins: ['@tailwindcss/postcss'] + plugins: { + 'tailwindcss': {}, + 'autoprefixer': {} + }Let's verify the package name and its dependencies:
examples/nextjs/app/posts/[slug]/page.tsx (1)
4-4: LGTM: Import path updated for Velite migration.The import path change from '#site/content' to '#velite' aligns with the migration to Velite for content management.
examples/nextjs/readme.md (1)
3-3: LGTM: Next.js version updated in documentation.Documentation correctly reflects the upgrade to Next.js 15.
examples/nextjs/tsconfig.json (1)
19-19: LGTM: Path alias updated for Velite integration.The path alias change from '#site/content' to '#velite' correctly reflects the migration to Velite.
| "shiki": "latest", | ||
| "tailwindcss": "latest", | ||
| "typescript": "latest", | ||
| "@tailwindcss/postcss": "^4.0.0", |
There was a problem hiding this comment.
Remove non-existent dependency @tailwindcss/postcss
The package @tailwindcss/postcss doesn't exist in the npm registry. Tailwind CSS already includes PostCSS integration by default.
- "@tailwindcss/postcss": "^4.0.0",| "@types/node": "^22.10.9", | ||
| "@types/react": "^19.0.7", | ||
| "@types/react-dom": "^19.0.3", | ||
| "next": "^15.1.6", | ||
| "next-themes": "^0.4.4", | ||
| "postcss": "^8.5.1", | ||
| "react": "^19.0.0", | ||
| "react-dom": "^19.0.0", | ||
| "rehype-pretty-code": "^0.14.0", | ||
| "shiki": "^1.29.1", | ||
| "tailwindcss": "^4.0.0", | ||
| "typescript": "^5.7.3", |
There was a problem hiding this comment.
Critical: Multiple non-existent package versions specified
Several dependencies are specified with versions that don't exist yet:
next: ^15.1.6 (latest stable is 14.x)react&react-dom: ^19.0.0 (latest stable is 18.x)tailwindcss: ^4.0.0 (latest stable is 3.x)@types/node: ^22.10.9 (latest LTS is 20.x)
Please update to the latest stable versions:
- "@types/node": "^22.10.9",
- "@types/react": "^19.0.7",
- "@types/react-dom": "^19.0.3",
- "next": "^15.1.6",
- "react": "^19.0.0",
- "react-dom": "^19.0.0",
- "tailwindcss": "^4.0.0",
+ "@types/node": "^20.11.5",
+ "@types/react": "^18.2.48",
+ "@types/react-dom": "^18.2.18",
+ "next": "^14.1.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "tailwindcss": "^3.4.1",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "@types/node": "^22.10.9", | |
| "@types/react": "^19.0.7", | |
| "@types/react-dom": "^19.0.3", | |
| "next": "^15.1.6", | |
| "next-themes": "^0.4.4", | |
| "postcss": "^8.5.1", | |
| "react": "^19.0.0", | |
| "react-dom": "^19.0.0", | |
| "rehype-pretty-code": "^0.14.0", | |
| "shiki": "^1.29.1", | |
| "tailwindcss": "^4.0.0", | |
| "typescript": "^5.7.3", | |
| "@types/node": "^20.11.5", | |
| "@types/react": "^18.2.48", | |
| "@types/react-dom": "^18.2.18", | |
| "next": "^14.1.0", | |
| "next-themes": "^0.4.4", | |
| "postcss": "^8.5.1", | |
| "react": "^18.2.0", | |
| "react-dom": "^18.2.0", | |
| "rehype-pretty-code": "^0.14.0", | |
| "shiki": "^1.29.1", | |
| "tailwindcss": "^3.4.1", | |
| "typescript": "^5.7.3", |
| @import 'tailwindcss'; | ||
|
|
||
| @plugin '@tailwindcss/typography'; | ||
|
|
||
| @custom-variant dark (&:is(.dark *)); |
There was a problem hiding this comment.
Invalid Tailwind CSS syntax
The new syntax is incorrect and incompatible with Tailwind CSS:
- Tailwind CSS uses
@tailwinddirectives, not@import - Plugins are configured in
tailwind.config.js, not via@plugin - Custom variants are defined in
tailwind.config.js, not via@custom-variant
Replace with standard Tailwind CSS syntax:
-@import 'tailwindcss';
-
-@plugin '@tailwindcss/typography';
-
-@custom-variant dark (&:is(.dark *));
+@tailwind base;
+@tailwind components;
+@tailwind utilities;And move plugin & variant configuration to tailwind.config.js:
// tailwind.config.js
module.exports = {
darkMode: 'class',
plugins: [
require('@tailwindcss/typography')
]
}|
|
||
| @layer base { | ||
| [data-rehype-pretty-code-figure] pre { | ||
| @apply px-0; | ||
| } | ||
|
|
||
| [data-rehype-pretty-code-figure] code { | ||
| @apply text-sm !leading-loose md:text-base; | ||
| @apply text-sm leading-loose! md:text-base; |
There was a problem hiding this comment.
Fix important modifier syntax
The ! modifier should be placed before the utility class, not after it.
- @apply text-sm leading-loose! md:text-base;
+ @apply text-sm !leading-loose md:text-base;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| @apply text-sm leading-loose! md:text-base; | |
| @apply text-sm !leading-loose md:text-base; |
| @@ -48,14 +48,14 @@ | |||
| "@rollup/plugin-node-resolve": "^16.0.0", | |||
| "@types/hast": "^3.0.4", | |||
| "@types/mdast": "^4.0.4", | |||
| "@types/node": "^22.10.2", | |||
| "@types/picomatch": "^3.0.1", | |||
| "@types/node": "^22.10.8", | |||
There was a problem hiding this comment.
Fix invalid @types/node version
The specified version ^22.10.8 is invalid as Node.js 22 hasn't been released yet. The latest LTS version of Node.js is 20.x.
- "@types/node": "^22.10.8",
+ "@types/node": "^20.11.5",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "@types/node": "^22.10.8", | |
| "@types/node": "^20.11.5", |
upgrade nextjs to v15 and tailwindcss to v4
Summary by Sourcery
Upgrade Next.js to v15 and Tailwind CSS to v4.
Build:
Chores:
Summary by CodeRabbit
Release Notes
Dependencies
Configuration
Data Management
#site/contentto#velite