Migrate Project to Next.js and Tailwind CSS v4#14
Migrate Project to Next.js and Tailwind CSS v4#14DeveloperAmrit wants to merge 2 commits intoAOSSIE-Org:mainfrom
Conversation
github-actions
bot
added
enhancement
📝 WalkthroughWalkthroughReplaces a Vite-based React app with a Next.js + Tailwind CSS (v4) app: removes Vite entrypoints/config, adds Next.js app-router layout/pages, PostCSS/Tailwind, Next/TypeScript configs, updates ESLint and package scripts/dependencies, and adds simple shared components. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
No actionable comments were generated in the recent review. 🎉 🧹 Recent nitpick comments
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Hey @Zahnentferner Please review this |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Fix all issues with AI agents
In @.gitignore:
- Line 409: Remove the duplicate ".next" entry from .gitignore: locate the
redundant ".next" line (the duplicate entry shown in the diff) and delete it,
leaving the existing ".next/" entry in the Vite / React / Next cache section
(the original ".next/" entry) intact so the repository only contains one ignore
for Next's build cache.
In `@package.json`:
- Line 27: Remove the Vite-specific ESLint plugin "eslint-plugin-react-refresh"
from package.json and any ESLint configuration references (e.g., the "plugins"
array or "extends" that mention "react-refresh"); then run your package manager
to update lockfiles (npm/yarn/pnpm install) and regenerate
package-lock.json/yarn.lock to ensure the dependency is gone. Ensure there are
no remaining references to "react-refresh" in .eslintrc.* or eslintConfig in
package.json and remove them if present.
- Line 10: The "lint" npm script currently uses the removed Next.js command
("lint": "next lint"); update the package.json "lint" script to call the ESLint
CLI directly (e.g., set the "lint" script to run eslint .) and, if you want
Next.js recommended rules, add the devDependency "eslint-config-next" and
reference it in your ESLint configuration (e.g., extend "next" in .eslintrc) so
linting continues to work under Next.js 16.
In `@tsconfig.json`:
- Around line 2-19: Update the TypeScript compiler options to be compatible with
Next.js by changing the "jsx" option from "react-jsx" to "preserve" and the
"target" option from "es5" to "ES2017"; locate the compilerOptions block and
modify the "jsx" and "target" entries accordingly so TypeScript does not perform
JSX transformation and the emitted lib target matches Next.js recommendations.
🧹 Nitpick comments (3)
package.json (1)
13-18: Move build-only dependencies (@tailwindcss/postcss,postcss,tailwindcss) todevDependencies.These are PostCSS/Tailwind build tools that are not needed at runtime. In a Next.js project, they should be in
devDependenciesto keep the production install lean.Proposed restructuring
"dependencies": { - "@tailwindcss/postcss": "^4.1.18", "next": "^16.1.6", - "postcss": "^8.5.6", "react": "^19.2.4", - "react-dom": "^19.2.4", - "tailwindcss": "^4.0.0" + "react-dom": "^19.2.4" }, "devDependencies": { + "@tailwindcss/postcss": "^4.1.18", "@eslint/js": "^9.17.0", ... + "postcss": "^8.5.6", + "tailwindcss": "^4.0.0",eslint.config.js (2)
12-13: Consider adding Node.js globals alongside browser globals.Next.js App Router components can run on the server (Server Components are the default). Having only
globals.browsermeans server-side code referencing Node globals (e.g.,process,Buffer) would trigger ESLint'sno-undefrule. Consider merging inglobals.nodeorglobals.nodeBuiltinas well, or scoping browser globals only to client component files.
6-22: Add@next/eslint-plugin-nextfor Next.js-specific lint rules.This is a Next.js project (v16.1.6), but the standard Next.js ESLint plugin is not configured. Consider adding
@next/eslint-plugin-nextto catch framework-specific issues such as using<img>instead ofnext/image,<a>instead ofnext/link, or missing metadata exports. This plugin is the recommended approach for Next.js projects.
| *.key | ||
| *.crt | ||
| *.local | ||
| .next |
There was a problem hiding this comment.
Duplicate .next entry in .gitignore.
.next/ already exists on line 368. This new entry on line 409 is redundant. Remove one of the two — preferably keep the existing .next/ on line 368 (within the organized "Vite / React / Next cache" section) and drop this one.
Proposed fix
-.next📝 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.
| .next |
🤖 Prompt for AI Agents
In @.gitignore at line 409, Remove the duplicate ".next" entry from .gitignore:
locate the redundant ".next" line (the duplicate entry shown in the diff) and
delete it, leaving the existing ".next/" entry in the Vite / React / Next cache
section (the original ".next/" entry) intact so the repository only contains one
ignore for Next's build cache.
| "dev": "next dev", | ||
| "build": "next build", | ||
| "start": "next start", | ||
| "lint": "next lint" |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat package.jsonRepository: AOSSIE-Org/OrgExplorer
Length of output: 825
🏁 Script executed:
rg -n 'eslint-config-next' .Repository: AOSSIE-Org/OrgExplorer
Length of output: 48
🌐 Web query:
Next.js 16 next lint eslint-config-next required peer dependency
💡 Result:
In Next.js 16, next lint is removed, so you shouldn’t be trying to satisfy next lint-related dependency behavior anymore—linting is done by running ESLint directly (CLI). Next.js 16 also removed the eslint option in next.config.* and next build no longer runs linting. [1]
If you want the “Next.js recommended rules”, you must add the config yourself:
- Install:
eslinteslint-config-next(this is the shareable config that includes@next/eslint-plugin-nextand other related lint plugins/config) [2]
Example (pnpm):
pnpm add -D eslint eslint-config-next
pnpm exec eslint .[2]
If you’re migrating from next lint, Next provides a codemod to switch to ESLint CLI:
npx `@next/codemod`@canary next-lint-to-eslint-cli .[1]
About “required peer dependency” warnings: those come from eslint-config-next being a shareable ESLint config package, which expects you (the app) to provide compatible peer deps (primarily ESLint itself, and TypeScript if you’re using TS linting). The official Next.js ESLint docs now explicitly instruct installing eslint alongside eslint-config-next. [2]
Sources: [1] Next.js “Upgrading: Version 16”; [2] Next.js ESLint configuration docs.
Update lint script for Next.js 16 — next lint command was removed.
In Next.js 16, next lint is deprecated and removed. The "lint": "next lint" script will fail. Update it to use ESLint CLI directly: eslint .
- "lint": "next lint"
+ "lint": "eslint ."Optionally, to use Next.js recommended ESLint rules, add eslint-config-next to devDependencies and include it in your ESLint config.
📝 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.
| "lint": "next lint" | |
| "lint": "eslint ." |
🤖 Prompt for AI Agents
In `@package.json` at line 10, The "lint" npm script currently uses the removed
Next.js command ("lint": "next lint"); update the package.json "lint" script to
call the ESLint CLI directly (e.g., set the "lint" script to run eslint .) and,
if you want Next.js recommended rules, add the devDependency
"eslint-config-next" and reference it in your ESLint configuration (e.g., extend
"next" in .eslintrc) so linting continues to work under Next.js 16.
| "@types/react-dom": "^19.0.2", | ||
| "eslint": "^9.17.0", | ||
| "eslint-plugin-react-hooks": "^5.1.0", | ||
| "eslint-plugin-react-refresh": "^0.4.16", |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Remove Vite leftover: eslint-plugin-react-refresh.
This plugin is specific to Vite's React Fast Refresh and serves no purpose in a Next.js project.
Proposed fix
"devDependencies": {
...
- "eslint-plugin-react-refresh": "^0.4.16",
...📝 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.
| "eslint-plugin-react-refresh": "^0.4.16", |
🤖 Prompt for AI Agents
In `@package.json` at line 27, Remove the Vite-specific ESLint plugin
"eslint-plugin-react-refresh" from package.json and any ESLint configuration
references (e.g., the "plugins" array or "extends" that mention
"react-refresh"); then run your package manager to update lockfiles
(npm/yarn/pnpm install) and regenerate package-lock.json/yarn.lock to ensure the
dependency is gone. Ensure there are no remaining references to "react-refresh"
in .eslintrc.* or eslintConfig in package.json and remove them if present.
| "compilerOptions": { | ||
| "target": "es5", | ||
| "lib": [ | ||
| "dom", | ||
| "dom.iterable", | ||
| "esnext" | ||
| ], | ||
| "allowJs": true, | ||
| "skipLibCheck": true, | ||
| "strict": true, | ||
| "noEmit": true, | ||
| "esModuleInterop": true, | ||
| "module": "esnext", | ||
| "moduleResolution": "bundler", | ||
| "resolveJsonModule": true, | ||
| "isolatedModules": true, | ||
| "jsx": "react-jsx", | ||
| "incremental": true, |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n tsconfig.jsonRepository: AOSSIE-Org/OrgExplorer
Length of output: 1051
🌐 Web query:
Next.js tsconfig.json jsx preserve react-jsx settings
💡 Result:
- In a Next.js app, keep
compilerOptions.jsxas"preserve". Next.js expects TypeScript to not transform JSX because Next (SWC/Babel) performs the optimized JSX transform, and it may automatically rewrite yourtsconfig.jsonback to"jsx": "preserve". [1] "react-jsx"vs"preserve"(TypeScript behavior):"preserve": TypeScript keeps JSX intact in the output for another tool to transform. [2]"react-jsx": TypeScript transforms JSX using the “new” React JSX runtime. (Useful when TypeScript is the thing emitting final JS.) [2]
- If you want
"react-jsx"for a separate build/tooling flow, use a second tsconfig (e.g.tsconfig.build.json) and point Next.js to whichever config you want viatypescript.tsconfigPath(or runtsc -p tsconfig.build.jsonfor non-Next builds). [3]
Sources: Next.js TypeScript configuration docs [1], TypeScript JSX compiler option docs [2], Next.js typescript.tsconfigPath docs [3].
🌐 Web query:
Next.js 16 target ES2017 compiler options requirements
💡 Result:
For Next.js 16, the default TypeScript template generated by create-next-app 16.0.0 sets these tsconfig.json compilerOptions (including target: "ES2017") as the recommended baseline: target: "ES2017", lib: ["dom","dom.iterable","esnext"], module: "esnext", moduleResolution: "bundler", jsx: "react-jsx", noEmit: true, isolatedModules: true, plus common flags like strict, skipLibCheck, esModuleInterop, resolveJsonModule, incremental, and a default paths alias. It also includes Next-generated types in include (notably .next/types/**/*.ts). [1]
What’s actually “required” vs. just “recommended”:
- Next.js uses SWC to compile TypeScript/TSX (so TS
targetmainly affects type-checking/editor diagnostics, not the JS that Next outputs). [2] - If you want Next’s generated type definitions (e.g. for typed routes, etc.) to be picked up by TypeScript, your
tsconfig.jsonmust include.next/types/**/*.ts(create-next-app does this automatically). [3]
Reference (create-next-app 16.0.0 default tsconfig.json): see the full template config in the source. [1]
Sources: [1] [2] [3]
Change jsx to "preserve" and target to "ES2017" for Next.js compatibility.
Two compiler options need correction:
-
"jsx": "react-jsx"(line 18) — Next.js requires"jsx": "preserve"because Next.js handles JSX transformation via SWC. Setting it to"react-jsx"causes TypeScript to transform JSX, conflicting with Next.js's own JSX handling. -
"target": "es5"(line 3) — Next.js 16 recommends"target": "ES2017". ES5 is unnecessarily restrictive and doesn't match the create-next-app template.
Proposed fix
"compilerOptions": {
- "target": "es5",
+ "target": "ES2017",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
- "jsx": "react-jsx",
+ "jsx": "preserve",
"incremental": true,📝 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.
| "compilerOptions": { | |
| "target": "es5", | |
| "lib": [ | |
| "dom", | |
| "dom.iterable", | |
| "esnext" | |
| ], | |
| "allowJs": true, | |
| "skipLibCheck": true, | |
| "strict": true, | |
| "noEmit": true, | |
| "esModuleInterop": true, | |
| "module": "esnext", | |
| "moduleResolution": "bundler", | |
| "resolveJsonModule": true, | |
| "isolatedModules": true, | |
| "jsx": "react-jsx", | |
| "incremental": true, | |
| "compilerOptions": { | |
| "target": "ES2017", | |
| "lib": [ | |
| "dom", | |
| "dom.iterable", | |
| "esnext" | |
| ], | |
| "allowJs": true, | |
| "skipLibCheck": true, | |
| "strict": true, | |
| "noEmit": true, | |
| "esModuleInterop": true, | |
| "module": "esnext", | |
| "moduleResolution": "bundler", | |
| "resolveJsonModule": true, | |
| "isolatedModules": true, | |
| "jsx": "preserve", | |
| "incremental": true, |
🤖 Prompt for AI Agents
In `@tsconfig.json` around lines 2 - 19, Update the TypeScript compiler options to
be compatible with Next.js by changing the "jsx" option from "react-jsx" to
"preserve" and the "target" option from "es5" to "ES2017"; locate the
compilerOptions block and modify the "jsx" and "target" entries accordingly so
TypeScript does not perform JSX transformation and the emitted lib target
matches Next.js recommendations.
1 participant
Addressed Issues:
Fixes #13
Screenshots/Recordings:
Additional Notes:
Summary
This PR migrates the project from Vite + React to Next.js (App Router) and updates the styling framework to Tailwind CSS v4. The migration ensures better scalability, server-side rendering (SSR), and modern styling capabilities.
Checklist
Summary by CodeRabbit
New Features
Chores
Removals