feat: upgrade to Next.js 16, TailwindCSS v4, Storybook 10, and Biome#422
Open
feat: upgrade to Next.js 16, TailwindCSS v4, Storybook 10, and Biome#422
Conversation
Contributor
hari
commented
Mar 6, 2026
hari
commented
- Upgrade Next.js 14 → 16, TailwindCSS v3 → v4, Storybook 9 → 10
- Replace ESLint + Prettier with Biome for linting and formatting
- Replace contentlayer with velite for content processing
- Migrate CSS config from tailwind.config.ts to CSS-based @theme syntax
- Fix animated-border-trail CSS @Property animation compatibility
- Add (main) route group for layout separation
- Update component preview iframe URLs for Storybook 10 autodocs
- Fix story file issues (titles, exports, autodocs tags)
- Add deploy-v3 GitHub Actions workflow
- Update globals.css with TailwindCSS v4 base layer resets
- Upgrade Next.js 14 → 16, TailwindCSS v3 → v4, Storybook 9 → 10 - Replace ESLint + Prettier with Biome for linting and formatting - Replace contentlayer with velite for content processing - Migrate CSS config from tailwind.config.ts to CSS-based @theme syntax - Fix animated-border-trail CSS @Property animation compatibility - Add (main) route group for layout separation - Update component preview iframe URLs for Storybook 10 autodocs - Fix story file issues (titles, exports, autodocs tags) - Add deploy-v3 GitHub Actions workflow - Update globals.css with TailwindCSS v4 base layer resets Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
Important Review skippedToo many files! This PR contains 300 files, which is 150 over the limit of 150. ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (300)
You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
Comment on lines
+10
to
+48
| runs-on: ubuntu-latest | ||
| environment: v3-deployment | ||
| steps: | ||
| - name: Checkout | ||
| uses: actions/checkout@v4 | ||
| - name: Setup Node | ||
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: "20" | ||
| - name: Install yarn | ||
| run: npm install -g yarn | ||
| - name: Restore cache | ||
| uses: actions/cache@v4 | ||
| with: | ||
| path: | | ||
| .next/cache | ||
| key: ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }} | ||
| restore-keys: | | ||
| ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}- | ||
| - name: Install dependencies | ||
| run: yarn install --immutable | ||
| - name: Build component previews | ||
| run: yarn storybook:build | ||
| - name: Build with Next.js | ||
| env: | ||
| NEXT_PUBLIC_APP_URL: ${{ vars.NEXT_PUBLIC_APP_URL }} | ||
| NEXT_PUBLIC_SUPABASE_URL: ${{ vars.NEXT_PUBLIC_SUPABASE_URL }} | ||
| NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ vars.NEXT_PUBLIC_SUPABASE_ANON_KEY }} | ||
| NEXT_PUBLIC_POSTHOG_KEY: ${{ vars.NEXT_PUBLIC_POSTHOG_KEY }} | ||
| NEXT_PUBLIC_POSTHOG_HOST: ${{ vars.NEXT_PUBLIC_POSTHOG_HOST }} | ||
| NEXT_PUBLIC_PLUNK_API_KEY: ${{ vars.NEXT_PUBLIC_PLUNK_API_KEY }} | ||
| run: yarn build | ||
| - name: Deploy to Cloudflare Pages | ||
| uses: cloudflare/wrangler-action@v3 | ||
| with: | ||
| apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} | ||
| accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} | ||
| command: pages deploy out --project-name=animata-v3 --branch=main | ||
| gitHubToken: ${{ secrets.GITHUB_TOKEN }} |
Check warning
Code scanning / CodeQL
Workflow does not contain permissions Medium
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 1 day ago
To fix the problem, explicitly define a minimal permissions block so that the GITHUB_TOKEN used by this workflow/job is limited to read-only repository contents unless more is required. The safest pattern is to declare permissions at the workflow root (applies to all jobs) or at the deploy-v3 job level. Since there is only a single job and no evidence of needing write permissions (the job checks out code, builds, caches, and then deploys to Cloudflare using Cloudflare credentials), we can safely set contents: read as the only permission.
The best minimal change is to add a permissions block near the top of .github/workflows/deploy-v3.yml, right after the name: line (or before/after on:; all are valid) so that it applies to the entire workflow. No imports or additional methods are needed since this is just YAML configuration. Concretely, in .github/workflows/deploy-v3.yml, insert:
permissions:
contents: readbetween line 1 (name: Deploy v3) and line 3 (on:), keeping indentation consistent. This documents that the workflow only needs read access to repository contents and ensures the GITHUB_TOKEN is not given unnecessary write permissions.
Suggested changeset
1
.github/workflows/deploy-v3.yml
| @@ -1,5 +1,8 @@ | ||
| name: Deploy v3 | ||
|
|
||
| permissions: | ||
| contents: read | ||
|
|
||
| on: | ||
| push: | ||
| branches: |
Copilot is powered by AI and may make mistakes. Always verify output.
Cloudflare Pages defaults to Node 18.17.1, but Next.js 16 requires Node >=20.9.0. The .node-version file is respected by Cloudflare's build system. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Deploying animata with
|
| Latest commit: |
891602f
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://cda95907.animata.pages.dev |
| Branch Preview URL: | https://hari-lamichhane-upgrade-to-l.animata.pages.dev |
- Inline @Property and @Keyframes in AnimatedBorderTrail component so the CSS custom property animation works with TailwindCSS v4 - Remove leftover test files (testingo, navigation-menu) that broke storybook build due to missing @radix-ui/react-navigation-menu dep Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Ensures component previews are always built during `yarn build`, including on Cloudflare Pages direct builds where the build command is just `yarn build`. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Install @storybook/addon-docs to support autodocs in Storybook 10 - Run Next.js and Storybook dev server concurrently via `yarn dev` - Use NEXT_PUBLIC_STORYBOOK_URL env var to point previews to Storybook dev server in development, falling back to /preview for production - Add prebuild script to build static storybook for production builds - Update all 162 MDX files from --docs to --primary story IDs - Use viewMode=story for component preview iframes - Fix border trail animation by inlining @Property for TailwindCSS v4 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Next.js 16 uses Turbopack by default which skips the webpack velite plugin. Run velite CLI directly: --watch mode for dev, one-shot for prebuild. Fixes stale .velite cache causing --docs IDs to persist. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace bg-opacity-*, text-opacity-*, border-opacity-* with the Tailwind v4 color/opacity modifier syntax (e.g. bg-gray-400/30). Also move complex multi-layer box-shadows to inline styles for algolia buttons since Tailwind v4 can't parse rgba() commas in arbitrary shadow values. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Restore missing styles/storybook.css (lost in migration) which defines storybook-fix class and embedded preview styles - Re-add storybook.css import to storybook preview config - Replace -z-1 with z-0 in components — in Tailwind v3 -z-1 was not a default utility (no-op), but in v4 it generates z-index:-1 which pushes elements behind the parent background Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.