How I Optimized a Next.js +Refine + Ant Design Project for Lightning-Fast Performance 🚀

Zineb Esso — Sat, 26 Apr 2025 19:26:23 +0000

When working with frameworks like Refine, Next.js, and Ant Design, it's easy to build powerful apps — but making them fast and optimized takes some extra steps.

In this post, I'll show you how I took a standard Refine + Next.js project and customized it for better performance, faster loading times, and smoother UX.

(And yes, I'll share Core Web Vitals scores before and after the optimizations! 📈)

🔥 Quick Demo

Here's a quick demo showing the performance difference after optimization:

Before:

After:

🧩 Stack Overview

What is Refine?

Refine is a headless React framework focused on building internal tools, admin panels, and dashboards — making CRUD operations much easier.

What is Ant Design (antd)?

Ant Design is an enterprise-class UI library offering a large collection of well-designed React components, perfect for clean, consistent UIs.

⚙️ Step 1: Customizing `next.config.mjs`

The first big move was tuning the Next.js configuration to make imports smarter, bundles smaller, and builds faster.

Here's the updated next.config.mjs:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: [
    "@refinedev/core",
    "@refinedev/devtools",
    "@refinedev/nextjs-router",
    "@refinedev/kbar",
    "@refinedev/nestjsx-crud",
    "@refinedev/antd",
    "@ant-design/icons",
    "antd",
  ],
  experimental: {
    optimizePackageImports: [
      "@refinedev/core",
      "@refinedev/devtools",
      "@refinedev/nextjs-router",
      "@refinedev/kbar",
      "@refinedev/nestjsx-crud",
      "@refinedev/antd",
      "@ant-design/icons",
      "antd",
    ],
  },
  swcMinify: true,
  modularizeImports: {
    antd: {
      transform: "antd/es/{{member}}",
      preventFullImport: true,
    },
    "@ant-design/icons": {
      transform: "@ant-design/icons/es/icons/{{member}}",
      preventFullImport: true,
    },
  },
  compiler: {
    reactRemoveProperties: true,
    removeConsole: { exclude: ["error", "warn"] },
  },
  output: "standalone",
};

export default nextConfig;

🧠 Key Config Changes:

Transpile external packages for better compatibility
Optimize package imports for tree-shaking
Modularize imports to avoid loading full libraries
Remove console logs and non-essential props from production
Standalone output for lighter deployments (Docker, serverless)

✅ Result: Faster builds, smaller bundles, and better runtime performance.

🚀 Step 2: Adding a Global `loading.tsx` Component

We don't want users staring at blank screens, right?

I added a global loading indicator:

// app/loading.tsx
const Loading = () => (
  <div className="flex items-center justify-center h-screen text-lg">
    Loading...
  </div>
);

export default Loading;

Why This Matters:

📱 Gives instant feedback while components load
⚡ Improves "perceived performance" (even if load time is the same)
🎯 Reduces Largest Contentful Paint (LCP) and layout shifts
📈 Improves SEO and Core Web Vitals

✅ Result: Faster-feeling app + better UX from the user's perspective.

⚡ Step 3: Dynamic Imports with `next/dynamic`

Instead of using React.lazy, Next.js offers dynamic() for better optimization.

Here’s how I used it:

import dynamic from "next/dynamic";
import { Suspense } from "react";
import LoadingSpinner from "@context/loadingSpinner";

const BlogPostCreateComponent = dynamic(
  () => import("@components/blog/create"),
  {
    ssr: false,
    loading: () => <LoadingSpinner />,
  }
);

export default function BlogPostCreate() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <BlogPostCreateComponent />
    </Suspense>
  );
}

Why Use `dynamic()` Instead of `lazy()`?

🏎️ Built-in to Next.js and integrates perfectly
🔥 Control over SSR (disable server-side rendering if needed)
📦 Automatic code splitting for lighter pages
🎡 Custom loading states (better than default browser loading)

✅ Result: Less initial JavaScript, quicker interaction, and smoother page transitions.

🎨 Step 4: Tailwind CSS Optimization with JIT Mode

Tailwind can get bloated if not handled properly.

That's why I enabled Just-in-Time (JIT) mode in tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  mode: 'jit',
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: { extend: {} },
  plugins: [],
};

Benefits:

⚡ Faster build times
🧹 Smaller final CSS bundle
🎯 Only generates classes you actually use

✅ Result: Clean, efficient, production-ready CSS.

📦 Running the Project

pnpm install     # Install dependencies
pnpm dev         # Start development server
pnpm build       # Create a production build
pnpm start       # Launch production server

👉 Pro Tip: Production optimizations (like tree-shaking and minification) are only fully applied after pnpm build.

📈 Performance Comparison: Before vs After

Metric	Before	After
Bundle Size	Huge	Reduced
Initial Load Time	Slower	Faster
Console Noise	Lots	Clean
User Experience	Choppy	Smooth
Core Web Vitals	🚫 Poor	✅ Improved

📊 Core Web Vitals Improvement

Before:

After:

✅ Noticeable improvement in LCP, FCP, CLS, and TTFB scores!

✅ Conclusion

By optimizing the Next.js config, introducing better loading strategies, dynamically importing components, and cleaning up the Tailwind setup, I transformed a good app into a great, fast, and scalable one.

These changes led to:

🚀 Faster load times
📈 Better SEO and Web Vitals
🧩 Easier long-term maintenance

🔗 Check the Full Source Code

GitHub Repo (Link)

🗓️ Building a Custom Timeline Calendar with Next.js

Zineb Esso — Sat, 26 Apr 2025 17:25:23 +0000

Managing tasks across a team can get messy—especially when you want to see what everyone is working on. That’s why I built Custom Timeline Calendar: a responsive, timeline-style calendar that visually maps tasks across a 24-hour day, per user.

✨ Key Features

📅 Select a specific day to view
👤 Each row represents a team member
🕒 Tasks are laid out hour by hour
📱 Fully responsive design
🛠️ Easy to customize and extend

🧱 Tech Stack

React / Next.js — for a fast and modern web framework
Tailwind CSS — utility-first styling
Ant Design — clean and functional date picker component

🚀 Try It Out

1. Clone the Repository

git clone https://github.com/ZinebEsso/Custom-Timeline-Calendar.git
cd custom-timeline-calendar

2. Install Dependencies

npm install

3. Start the Dev Server

npm run dev

Then open your browser at http://localhost:3000.

📂 Project Structure

.
├── components/
│   └── calendar_v1.tsx  // Main calendar UI
├── pages/
│   └── index.tsx         // Main entry page
├── screenshots/          // For README visuals
└── README.md

🔄 Ongoing Development

This is just version 1 of the Custom Timeline Calendar — and there's a lot more coming! I'm actively working on improvements like:

Task modals with more detail
Drag-and-drop task blocks
Weekly and monthly views
Integrations with tools like Google Calendar or Trello

If you have ideas or want to contribute, feel free to open an issue or submit a PR on GitHub!

🔗 Check It Out

👉 GitHub: custom-timeline-calendar

☕ Support

If you find this calendar helpful, feel free to buy me a coffee 💛. It really helps keep side projects like this alive!

Forem: Zineb Esso

How I Optimized a Next.js +Refine + Ant Design Project for Lightning-Fast Performance 🚀

🔥 Quick Demo

Before:

After:

🧩 Stack Overview

What is Refine?

What is Ant Design (antd)?

⚙️ Step 1: Customizing next.config.mjs

🧠 Key Config Changes:

🚀 Step 2: Adding a Global loading.tsx Component

Why This Matters:

⚡ Step 3: Dynamic Imports with next/dynamic

Why Use dynamic() Instead of lazy()?

🎨 Step 4: Tailwind CSS Optimization with JIT Mode

Benefits:

📦 Running the Project

📈 Performance Comparison: Before vs After

📊 Core Web Vitals Improvement

Before:

After:

✅ Conclusion

🔗 Check the Full Source Code

🗓️ Building a Custom Timeline Calendar with Next.js

✨ Key Features

🧱 Tech Stack

🚀 Try It Out

1. Clone the Repository

2. Install Dependencies

3. Start the Dev Server

📂 Project Structure

🔄 Ongoing Development

🔗 Check It Out

☕ Support

⚙️ Step 1: Customizing `next.config.mjs`

🚀 Step 2: Adding a Global `loading.tsx` Component

⚡ Step 3: Dynamic Imports with `next/dynamic`

Why Use `dynamic()` Instead of `lazy()`?