DEV Community: Achmad Muqorrobin

Implement Local & Google Fonts in Next.js (The Right way): A Practical Pattern Guide

Achmad Muqorrobin — Mon, 05 Jan 2026 09:27:20 +0000

This is the most complete and practical guide I’ve found myself wishing existed when working with Next.js fonts. So, bear with me till the end – this is gonna be fun and practical.

This article consists of two parts: PART I focuses on implementation, and PART II covers patterns. Let’s dive in.

TL;DR

Use next/font/local for local fonts and next/font/google for Google Fonts.
className applies fonts immediately and has higher specificity.
variable creates CSS variables and must be explicitly used in CSS.
Always match font weight and style correctly to avoid Tailwind conflicts.
Use variable when managing multiple fonts in large projects.
With Tailwind v4, prefer @utility for better DX and IntelliSense.
Centralize font definitions to keep app/layout.tsx clean and scalable.

PART I – Implementation
- Chapter 1: Setup
- Chapter 2: Usage
- Chapter 3: Arbitrary Values
- Chapter 4: Multiple Local Fonts
PART II – Pattern
- Chapter 5: Multiple Fonts (Local + Google Fonts)

PART I - IMPLEMENTATION

Of course you can implement this tutorial within your current running projects and you don’t have to create new next.js projects. but, for the sake of simplicity I will generate new next.js project, feel free to skip to Chapter 2 for direct implementation. nevertheless, if you willing to follow through then let’s dip in from Chapter 1, the setup.

Chapter 1 - Setup

First things first, prepare the local fonts. I’ve prepared the fonts, there are two fonts I’m about to use, lufga and SF Pro Text. though it doesn’t matter what fonts you are going to use.

Add your fonts inside your /app folder or if you configure next.js with src folder, then place it inside the /src folder.

Remember, you don’t have to place fonts inside the /public folder because doing so makes them publicly accessible assets (you don’t want users deliberately stealing your custom fonts, do you?).

furthermore, Next.js itself has a built-in optimization for fonts. so, technically you can place the folder anywhere you want as long as you call your fonts file precisely.

Then proceed to call the local fonts. you can implement directly to app/layout.ts

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import localFont from "next/font/local";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

// Start of: Implementing Local Font
const sfProText = localFont({
  src: [
    {
      path: "../app/fonts/sfprotext/SF-Pro-Text-Light.otf",
      style: "light",
      weight: "300",
    },
    {
      path: "../app/fonts/sfprotext/SF-Pro-Text-Regular.otf",
      style: "normal",
      weight: "400",
    },
    {
      path: "../app/fonts/sfprotext/SF-Pro-Text-Medium.otf",
      style: "medium",
      weight: "500",
    },
    {
      path: "../app/fonts/sfprotext/SF-Pro-Text-Semibold.otf",
      style: "semibold",
      weight: "600",
    },
    {
      path: "../app/fonts/sfprotext/SF-Pro-Text-Bold.otf",
      style: "bold",
      weight: "700",
    },
  ],
  variable: "--font-sf-pro",
});
// End of: Implementing Local Font

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );
}

Note: Because I’m installing next.js from scratch then this is the default setup derived from next.js, the only addition I made are from “Start of: Implementing Local Font” to “End of: Implementing Local Font”

Now, you noticed that inside the localFont configuration, I added path, style, and weight inside the src with variable adjacent to it.
Let’s break down:

path defines the location of your local font files. This is important, and make sure you specify it correctly. if you choose to filled in arbitrary values then it would output with inappropriate values as I show you in Chapter 3 later.
style and weight are related, make sure you specify accordingly. if not, it would be break the fonts implementations and confuse you along development (I’ll show you in Chapter 3). the easiest standard you can refer to this tailwind docs. I’ll show you how utilize it correctly.
variable is formed by css variables rules. This means you are naming the font implementation using that variable name (in my case —font-sf-pro) that can be use inside css files when necessary.

Chapter 2 - the usage

before you can see the changes, better check if the fonts load correctly by log it.
add this code

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  console.log("sfprotext: ", sfProText);
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );
}

if you see the image like below in your console then you have done the right way.

Because layout.ts is a Server Component, the console.log output will appear in the server terminal.

with all this setup, let’s try to check out first the font in browser. try add this text in app/page.tsx.

export default function Home() {
  return (
    <div>
      <h1>Text</h1>
    </div>
  );
}

see the result in the browser, then it should look like this.

Notice that the local font we just imported doesn’t render in browser yet. now we can implement it in two methods, inject variable or classname. You can pick one of these method that suits with your projects.

Method 1: Classname

with this method you can just inject the classname property provided by localFont. adjust app/layout.tsx like below

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${sfProText.className}`}>{children}</body>
    </html>
  );
}

with this change, next.js automatically prioritize localFont. see results in browser it should look like this

That’s it. Its already implemented.

Method 2: Variable

Second approach is use the variable, the variable lies inside the localFont definitions variable: "--font-sf-pro".

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${sfProText.variable}`}>{children}</body>
    </html>
  );
}

now try to see the font in browser.

wait, what’s happening? why wouldn’t the font change appropriately?

This happens because the variable option truly acts as a CSS variable.. The browsers do not execute those variable immediately unlike when you trying to inject className, you should add it’s name to css file you are intended to. for example, if you want to implement this font to all your project and make it as default font then add it to global.css.

@import "tailwindcss";

body {
  font-family: var(--font-sf-pro); 
}

then see the changes in the browser.

Oh look, that’s finally changed.

Up until this point, you might be wondering “why I should choose this method 2 using variable when using className reduce extra steps adding css hassle”. Yup, you’re right, but you will see the benefit of using variable when it comes to multiple local fonts involved. I’ll show you on chapter 4.

⚠️ Chapter 3 - Arbitrary values (Important)

in this chapter I show you when you fill the value of style and weight in localFont. recall this localFont

// Start of: Implementing Local Font
const sfProText = localFont({
  src: [
    {
      path: "../app/fonts/sfprotext/SF-Pro-Text-Light.otf",
      style: "light",
      weight: "300",
    },
    {
      path: "../app/fonts/sfprotext/SF-Pro-Text-Regular.otf",
      style: "normal",
      weight: "400",
    },
    {
      path: "../app/fonts/sfprotext/SF-Pro-Text-Medium.otf",
      style: "medium",
      weight: "500",
    },
    {
      path: "../app/fonts/sfprotext/SF-Pro-Text-Semibold.otf",
      style: "semibold",
      weight: "600",
    },
    {
      path: "../app/fonts/sfprotext/SF-Pro-Text-Bold.otf",
      style: "bold",
      weight: "700",
    },
  ],
  variable: "--font-sf-pro",
});

// End of: Implementing Local Font

try to set arbitrary values in one of those source. suppose I switch the bold version with normal version like this:

const sfProText = localFont({
  src: [
    {
      path: "../app/fonts/sfprotext/SF-Pro-Text-Light.otf",
      style: "light",
      weight: "300",
    },
    {
      path: "../app/fonts/sfprotext/SF-Pro-Text-Regular.otf", 
      style: "bold", // change this
      weight: "700", // change this
    },
    {
      path: "../app/fonts/sfprotext/SF-Pro-Text-Medium.otf",
      style: "medium",
      weight: "500",
    },
    {
      path: "../app/fonts/sfprotext/SF-Pro-Text-Semibold.otf",
      style: "semibold",
      weight: "600",
    },
    {
      path: "../app/fonts/sfprotext/SF-Pro-Text-Bold.otf",
      style: "normal", // change this
      weight: "400", // change this
    },
  ],
  variable: "--font-sf-pro"
});

You see I’ve already switch the style and weight for Bold and Normal font. look what happened in browser right now.

See? the browsers assume it’s normal font but what it comes it’s bold font, it is inappropriate. furthermore, you will confuse when it comes to style it with standard tailwind. for example,

export default function Home() {
  return (
    <div className="">
      <p className="font-bold">
        This text supposed to be bold but become normal
      </p>
      <p className="font-normal">
        This text supposed to be normal but become bold
      </p>
    </div>
  );
}

typescript
then try to see in the browsers. the output is like these

You see clearly? this very inappropriate and not developer-friendly. As a developer it’s our job to make our fellow developers understand what code we write. If this happened then it would brought headache to all other developers. So, make sure to set value appropriately to make better result.

Chapter 4 - Multiple Local Fonts

What if I want to set multiple local fonts at the same time and implement the font accordingly?

It’s just simple and I show you why use variable instead of className is more handy.

just add new localFont below your current font.

// Start of: Implementing Local Font

const sfProText = localFont({...
}) 

const lufga = localFont({
  src: [
    {
      path: "../app/fonts/lufga/LufgaLight.ttf",
      style: "light",
      weight: "300",
    },
    {
      path: "../app/fonts/lufga/LufgaRegular.ttf",
      style: "normal",
      weight: "400",
    },
    {
      path: "../app/fonts/lufga/LufgaMedium.ttf",
      style: "medium",
      weight: "500",
    },
    {
      path: "../app/fonts/lufga/LufgaSemiBold.ttf",
      style: "semibold",
      weight: "600",
    },
    {
      path: "../app/fonts/lufga/LufgaBold.ttf",
      style: "bold",
      weight: "700",
    },
  ],
  variable: "--font-lufga",
});

// End of: Implementing Local Font

then you can implement those fonts into app/layout.tsx. now, I’ll show you why using variables become more handy, let’s look at it

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${sfProText.variable} ${lufga.variable}`}>{children}</body>
    </html>
  );
}

After you implemented this, the fonts will not changed immediately. let’s see to the browser

You see? now compared it when you use className.

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${sfProText.variable} ${lufga.className}`}>
        {children}
      </body>
    </html>
  );
}

now see the result.

See? the font changes all over project.

This tiny adjustment alone makes the variable approach the clear winner for you if you want to inject new local fonts in already-large project. Instead of you changed the default font all over project, you managed it accordingly and set the font when its needed.

How exactly to managed local fonts accordingly?

first off make sure you change back to variable

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${sfProText.variable} ${lufga.variable}`}>
        {children}
      </body>
    </html>
  );
}

then you can setup the css like this in globals.css

@import "tailwindcss";

body {
  font-family: var(--font-sf-pro);
}

.use-lufga-font {
  font-family: var(--font-lufga) !important;
}

For the best approach, choose one font to become default of entire project. here I set the SF PRO TEXT font to be default font and Lufga is secondary font to be implemented when necessary.
suppose I want to use Lufga font in my Text 2, then I can change it like this

export default function Home() {
  return (
    <div className="">
      <p className="font-bold">Text 1</p>
      <p className="font-normal use-lufga-font ">Text 2</p>
    </div>
  );
}

now see the result.

See? you can manage accordingly which fonts you have you used, no hassle.

IMPROVEMENT

if you use tailwind version > 4 you can leverage it even better. to use the secondary font (in my case Lufga) I have to use manually in className.

.use-lufga-font {
  font-family: var(--font-lufga) !important;
}

well, sure it has no problem at all but yet it is bad for development experience (DX) because it won’t get advantage of intellisense if we use plain css. instead add utility layer like this.

@utility use-font--lufga {
  font-family: var(--font-lufga) !important;
}

with this setup, you will get better development experience by leverage the intellisense when you wrote inside className like below. notice I get intellisense for utility I just wrote.

export default function Home() {
  return (
    <div className="">
      <p className="font-bold">Text 1</p>
      <p className="font-normal use-lufga-font ">Text 2</p>

      <p className="use-font--lufga">Another text</p>
    </div>
  );
}

The result is like this.

That’s it all you need to know.

PART I Summary

In this section, we covered the practical implementation of local fonts in Next.js:

How to load local fonts correctly using next/font/local
The difference between className and variable
Why variable does not apply styles automatically
Common pitfalls caused by incorrect weight and style values
How improper font metadata can break Tailwind semantics
Managing multiple local fonts without affecting the entire project

At this point, you should be comfortable implementing and debugging local fonts in real-world Next.js projects.

PART II - PATTERN

now we currently in PART II which is Pattern. You don’t necessarily need to implement pattern because it is not mandatory, if you want to know about implementation of Font then PART I is enough. However, if you would then bear with me till the end.

Chapter 5 - Multiple Fonts

You might be wondering “How about cooperating local fonts with google-fonts?”

fortunately, Next.js has innate integration with google-fonts so you don’t have to import manually, you can just call from next/font/google and treat it like localFont. suppose I want to add poppins and poppins italic fonts.

import { Poppins } from "next/font/google";

const poppinst_init = Poppins({
  weight: ["200", "300", "400", "500", "600"],
  subsets: ["latin"],
  style: ["normal"],
  variable: "--font-poppins",
});

const poppinst_italic_init = Poppins({
  weight: ["200", "300", "400", "500", "600"],
  subsets: ["latin"],
  style: ["italic"],
  variable: "--font-poppins-italic",
});

However, for better implementation let’s implement pattern that make your DX more graceful. create new fonts.ts inside app/_lib/NextFont

import { Poppins } from "next/font/google";

const poppinst_init = Poppins({
  weight: ["200", "300", "400", "500", "600"],
  subsets: ["latin"],
  style: ["normal"],
  variable: "--font-poppins",
});

const poppinst_italic_init = Poppins({
  weight: ["200", "300", "400", "500", "600"],
  subsets: ["latin"],
  style: ["italic"],
  variable: "--font-poppins-italic",
});

export const fonts = {
  poppins: poppinst_init.className,
  poppins_italic: poppinst_italic_init.className,
};

in case you’re wondering “why would we choose className for this case?”

The answer is because it will easy to implement. furthermore, className has higher specifity, also we already choosed default font using our custom localFont either way. Consider this as tertiary fonts.

Then, How to implement it to our app? Simply inject it to our desired content.

import { fonts } from "./_lib/NextFonts/fonts";

export default function Home() {
  return (
    <div className="">
      <p className="font-bold">Text 1</p>
      <p className="font-normal use-lufga-font ">Text 2</p>

      <p className="use-font--lufga">Another text</p>

      <p className={`${fonts.poppins}`}>
        Another fonts - using Google Font Poppins
      </p>
      <p className={`${fonts.poppins_italic}`}>
        Another fonts - using Google Font Poppins Italic
      </p>
    </div>
  );
}

Result will be like this

Nice! Now we can go use both secondary and tertiary fonts in desired places, Great!

IMPROVEMENT

At this stage, when you lookup your app/layout.ts you will see the code cluttered. You can improve it by make it more concise by moving your fonts definitions into one file inside fonts.ts in app/_lib/NextFont.

import { Poppins } from "next/font/google";
import localFont from "next/font/local";

const poppinst_init = Poppins({
  weight: ["200", "300", "400", "500", "600"],
  subsets: ["latin"],
  style: ["normal"],
  variable: "--font-poppins",
});

const poppinst_italic_init = Poppins({
  weight: ["200", "300", "400", "500", "600"],
  subsets: ["latin"],
  style: ["italic"],
  variable: "--font-poppins-italic",
});

// Start of: Implementing Local Font
const sfProText = localFont({
  src: [
    {
      path: "../../../app/fonts/sfprotext/SF-Pro-Text-Light.otf",
      style: "light",
      weight: "300",
    },
    {
      path: "../../../app/fonts/sfprotext/SF-Pro-Text-Regular.otf",
      style: "normal",
      weight: "400",
    },
    {
      path: "../../../app/fonts/sfprotext/SF-Pro-Text-Medium.otf",
      style: "medium",
      weight: "500",
    },
    {
      path: "../../../app/fonts/sfprotext/SF-Pro-Text-Semibold.otf",
      style: "semibold",
      weight: "600",
    },
    {
      path: "../../../app/fonts/sfprotext/SF-Pro-Text-Bold.otf",
      style: "bold",
      weight: "700",
    },
  ],
  variable: "--font-sf-pro",
});

const lufga = localFont({
  src: [
    {
      path: "../../../app/fonts/lufga/LufgaLight.ttf",
      style: "light",
      weight: "300",
    },
    {
      path: "../../../app/fonts/lufga/LufgaRegular.ttf",
      style: "normal",
      weight: "400",
    },
    {
      path: "../../../app/fonts/lufga/LufgaMedium.ttf",
      style: "medium",
      weight: "500",
    },
    {
      path: "../../../app/fonts/lufga/LufgaSemiBold.ttf",
      style: "semibold",
      weight: "600",
    },
    {
      path: "../../../app/fonts/lufga/LufgaBold.ttf",
      style: "bold",
      weight: "700",
    },
  ],
  variable: "--font-lufga",
});

// End of: Implementing Local Font

export const fonts = {
  poppins: poppinst_init.className,
  poppins_italic: poppinst_italic_init.className,
  sfPro_var: sfProText.variable,
  lufga_var: lufga.variable,
};

Note: Don’t forget to readjust the localFonts path.
then in app/layout.ts you can implement it like this:

import type { Metadata } from "next";

import "./globals.css";
import { fonts } from "./_lib/NextFonts/fonts";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${fonts.lufga_var} ${fonts.sfPro_var} `}>
        {children}
      </body>
    </html>
  );
}

See? More concise and easy to understand. That’s all you need to know!

PART II Summary

In this section, we focused on scalable patterns for managing fonts:

Combining local fonts with Google Fonts using next/font/google
Deciding when to use className vs variable
Treating Google Fonts as secondary or tertiary fonts
Improving DX by centralizing font configuration
Keeping app/layout.tsx concise and readable
Preparing a font system that scales with large codebases

These patterns are optional, but highly recommended for long-term maintainability.

That’s it.

I wrote this article out of frustration with how many resources exist online about implementing local fonts, yet very few explain how to do it properly without unnecessary fluff. The documentation is clear but I know most people feel it’s dry to consume from those. So, I decide to make this small tutorial so you can follow through and digest the idea of implementing local fonts the right way and the pattern that I personally preferred. As a fellow developer, I’m very happy to share this with you. feel free to get in touch and discuss with me!

Oh anyway I forgot something… Happy new year for all the readers, wish you all the best in this new fascinating year! 🎉

Customize Expandable Tables in Ant Design — Controlled vs. Uncontrolled Approaches

Achmad Muqorrobin — Mon, 25 Aug 2025 09:39:39 +0000

Technology covers in this story:

Next.js
Typescript
Tailwind
Antd Components

Demo of the end result is here.

Intro: Why Maneuver?

as a Frontend Engineer you might frequently stumble upon the UI/UX design that doesn’t match some components even though the designers team already agreed to use certain design’s components (typical designers with some idealism, I’ve been there before :D). well here we are as developers, we often need to get creative when the design doesn’t fit the library defaults. That’s where the ‘maneuver’ comes in.

Here I share some of my experience for being maneuver from design agreements with Designer’s team. This example uses Next.js with TypeScript and AntD components. buckle up, we try something fun in here that you might never encountered before. I create this as practical as I could so you can get along with me for the real experience.

Setup

anyway, if you find yourself implusively directly want to code then I prepared the source code for this tutorial in here.

if you enjoy creating this on your own then bare with me, we’ll do that together.

start with installing next.js

npx create-next-app@latest

and this is my configuration settings of next.js (this is what I preferred, you can adjust it by yours)

✔ What is your project named? … maneuver_1_expandable
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
✔ What import alias would you like configured? … @/*

next install the antd components.

npm install antd

my package.json’s dependencies.

 "dependencies": {
    "antd": "^5.26.7",
    "next": "15.4.6",
    "react": "19.1.0",
    "react-dom": "19.1.0"
  },

thats it all the dependencies needed for this tutorial. if you wondering why you didn’t see “tailwind” as dependencies is because it bundles inside the next module.

the dependencies itself is worth noting. as you see here I’m using Antd components with Version 5.25.X, this is important because in this tutorial I will use the features that only available in this version like Semantic DOM (this is my favourite because you can directly style using native css instead of tweak it via separated css files or global css file), you can see the detail of changelog Antd in here.

next, I will create some adjustment in the next.js app I just generated

in page.tsx, clear all default generated code and leave it like this:

export default function Home() {
  return (
    <div className="flex items-center justify-center h-[100vh]">
      {/* Code here */}
      <h1>Code Here</h1>
    </div>
  );
}

and tweak for globals.css like this:

@import "tailwindcss";

:root {
  margin: 0;
  padding: 0;
}

run it with npm run dev and it will look like this:

it should good to go.

PART I

Step 1: Base Table

let’s start to create the base of Table. in this tutorial I take of granted from Antd Documentation and tweak it a little the data in the table for the sake of easiness for you to follow.

page.tsx

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
  description: "string;"
  phone_number: string;
  occupation: string;
  status: "single" | "married";
}

const data: DataType[] = [
  {
    key: 1,
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    description: ""
      "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park. ",
    occupation: "Software Engineer",
    phone_number: "8888888888",
    status: "married",
  },
  {
    key: 2,
    name: "John Smith",
    age: 32,
    address: "New York No. 1 Lake Park",
    description: ""
      "My name is John Smith, I am 27 years old, living in New York No. 1 Lake Park. ",
    occupation: "Network Engineer",
    phone_number: "99999999",
    status: "single",
  },
  {
    key: 3,
    name: "Ahmed Alakhtar",
    age: 32,
    address: "New York No. 1 Lake Park",
    description: ""
      "My name is Ahmed Alakhtar, I am 29 years old, living in New York No. 1 Lake Park. ",
    occupation: "AI engineer",
    phone_number: "111111111",
    status: "single",
  },
];

const columns: TableColumnsType<DataType> = [
  {
    title: "\"Name\","
    dataIndex: "name",
    key: "name",
  },
  { title: "\"Age\", dataIndex: \"age\", key: \"age\" },"
  { title: "\"Address\", dataIndex: \"address\", key: \"address\" },"
  { title: "\"Descritpion\", dataIndex: \"description\", key: \"description\" },"
];


export default function Home() {
  return (
    <div className="flex items-center justify-center h-[100vh]">
      {/* Code here */}
      <Table<DataType> columns={columns} dataSource={data} pagination={false} />
    </div>
  );
}

Notice that I tweaked some from the antd documentation.

In DataType I add three more key value pairs in interface.

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
  description: "string;"
  phone_number: string; // new
  occupation: string; // new 
  status: "single" | "married"; // new
}

create data for data source table as you please. what’s important is you have to comply with the columns you made.

Inside the component, the Table component I’m not implementing the expandable yet, we’ll discuss more later but for the sake of convenient I remove the pagination (we not using that here).

so the result would be like this:

Step 2: Expandable Basics

currently there’s no special about this, we just create the very base of the table Utilizing Antd Components. then creating the expandable is easy, you just add it like the documentation and boom the expandable is applicable.

<Table<DataType>
        columns={columns}
        dataSource={data}
        pagination={false}
        expandable={{
          expandedRowRender: (record) => (
            <p style={{ margin: 0 }}>{record.description}</p>
          ),
        }}
      />

the result is like this:

Note: In case you got an error is very likely that because the next.js assume you are code in server-side, so in order to make the next.js know that you are code in client-side just add “use client” at the very top of the code.

"use client";

well in reality is not that easy, leaving the table like this would piss the designers off :D so then this is what I called Maneuver, I have to tweak it so it meets the Designers and the Product Managers Standart.

First off, we have to change the toggler from the first column to the last column and change it to text “details” rather than icon.

Step 3: Custom Trigger

To change the toggler column position you can Add it like this.

const columns: TableColumnsType<DataType> = [
  {
    title: "\"Name\","
    dataIndex: "name",
    key: "name",
  },
  { title: "\"Age\", dataIndex: \"age\", key: \"age\" },"
  { title: "\"Address\", dataIndex: \"address\", key: \"address\" },"
  { title: "\"Descritpion\", dataIndex: \"description\", key: \"description\" },"
  Table.EXPAND_COLUMN, // add this code
];

this will make sure that the toggler on the last column.

the result would be like this

its halfway done, now let’s change the UI look of the triggerer. here we have to utilize the expandIcon API.

in the age of AI and LLM we developer often overlook the greatness of documentation, so we have to encourage ourselves to always look into documentation because it’s more Accurate and up to date.

the expandIcon API in the documentation is like this

what does it mean though? well if we don’t understand we can log with console.log to see what’s going on in there.

<Table<DataType>
        columns={columns}
        dataSource={data}
        pagination={false}
        expandable={{
          expandedRowRender: (record) => (
            <p style={{ margin: 0 }}>{record.description}</p>
          ),
          expandIcon: (props) => {
            console.log("props: ", props);
          },
        }}
      />

after this, open the developer console and see what’s come when you click the triggerer?

There you go, now we know what’s going on. meaning inside props there are 5 properties. you don’t have to use all those 5 properties, the most useful properties would be expanded (this is for detecting if the row is on expand state or not), onExpand (function from antd that make the toggle expandable works), and lastly record (this held all the data that we define in DataType interface). so we will utilize those three, we can destructuring those properties like this.

 expandIcon: ({ expanded, onExpand, record }) => {
            return expanded ? (
              <p onClick={(e) => onExpand(record, e)}>Hide</p>
            ) : (
              <p onClick={(e) => onExpand(record, e)}>Details</p>
            );
          },

and the result would be like this.

Triggerer UI Created Perferctly.

Step 4: Custom Expand Content

now for the last touch, we have to change the UI of expanded row.

the key lies in this code.

  expandedRowRender: (record) => (
            <p style={{ margin: 0 }}>{record.description}</p>
          ),

again, you may seem unfamiliar with it then we have to log it in order to knew what’s going on.

 expandedRowRender: (record) => {
            console.log("record: ", record);
            return <p style={{ margin: 0 }}>{record.description}</p>;
          },

when you see at developer console its appear like this.

the record was the value from DataType that we have defined before. so we can utilize it for creating the UI like this.

export default function Home() {
  const expandableUIRow: (record: DataType) => JSX.Element = (record) => {
    return (
      <section className="grid gap-8 p-2 grid-cols-2 max-w-[1000px]">
        <div>
          <p>
            <span className="font-bold">Name: </span> {record.name}
          </p>
          <p>
            <span className="font-bold">Age: </span> {record.age}
          </p>
          <p>
            <span className="font-bold">Address: </span> {record.address}
          </p>
          <p>
            <span className="font-bold">Description: </span>{" "}
            {record.description}
          </p>
        </div>

        <div>
          <p>
            <span className="font-bold">Occupation: </span> {record.occupation}
          </p>
          <p>
            <span className="font-bold">Phone: </span> {record.phone_number}
          </p>
          <p>
            <span className="font-bold">Status: </span> {record.status}
          </p>
        </div>
      </section>
    );
  };

  return (
    <div className="flex items-center justify-center h-[100vh]">
      {/* Code here */}
      <Table<DataType>
        columns={columns}
        dataSource={data}
        pagination={false}
        expandable={{
          expandedRowRender: (record) => {
            return <div>{expandableUIRow(record)}</div>;
          },
          expandIcon: ({ expanded, onExpand, record }) => {
            return expanded ? (
              <p onClick={(e) => onExpand(record, e)}>Hide</p>
            ) : (
              <p onClick={(e) => onExpand(record, e)}>Details</p>
            );
          },
        }}
      />
    </div>
  );
}

and the result would be like this.

There you go! now the result is as expected!

This is how to tweak expandable Table using Antd Components. this Part is completely rely on Antd default configuration, what does it mean anyway? well all the tutorial I show you above we just changed the UI from the necessary part and leave the functionality to antd, meaning you don’t necessarily control over the functionality

you might asked, then how to control over the functionality? we’ll do that in the Part II below, but before we jump in to the “How” you need to know “Why” First, Right?

Why would we need to control over functionality, is it important?

well the answer is it DEPENDS. if you want to just showing the table that looks like above then you most likely don’t need to control over. IT IS important when it comes to rendering base on Fetching backend data through API, and I belive that 80% of Table usage its using Dynamic Data Meaning we have to deal with Fetch API and so on.

as simple like this, what if I want the expandable triggerer is only appear when the data from API is on set? what if I want to Fetch detail API each one I click the “details” triggerer? what if I want to add shimmer loading when the data is not set? and so on.

if you already have reasons then let’s jump in.

PART II

Step 5: Full Control with State

this section will be focus on tweaking more depth. the table end result would be the same as above so I will use the same file like above and place the table below the existing table. adjust the existing code like this.

page.tsx

<div className="flex items-center justify-center h-[100vh]">
      {/* Code here */}
      <div>
        <Table<DataType>
          columns={columns}
          dataSource={data}
          pagination={false}
          expandable={{
            expandedRowRender: (record) => {
              console.log("record: ", record);
              return <div>{expandableUIRow(record)}</div>;
            },
            expandIcon: ({ expanded, onExpand, record }) => {
              return expanded ? (
                <p onClick={(e) => onExpand(record, e)}>Hide</p>
              ) : (
                <p onClick={(e) => onExpand(record, e)}>Details</p>
              );
            },
          }}
        />

        {/* Code here PART II */}
        <div className="mt-6">

        </div>
      </div>
    </div>

I will use the same Data type and the data same as before, the main differences is create another columns configuration for this new table and some adjustment in Data type and the data itself. the better way without ruining the last table is copy and paste it with different names.

interface DataTypeNew {
  key: string; // change the key type to string
  name: string;
  age: number;
  address: string;
  description: string;
  phone_number: string;
  occupation: string;
  status: "single" | "married";
}

const datanew: DataTypeNew[] = [
  {
    key: "1", // change to string
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    description:
      "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park. ",
    occupation: "Software Engineer",
    phone_number: "8888888888",
    status: "married",
  },
  {
    key: "2", // change to string
    name: "John Smith",
    age: 32,
    address: "New York No. 1 Lake Park",
    description:
      "My name is John Smith, I am 27 years old, living in New York No. 1 Lake Park. ",
    occupation: "Network Engineer",
    phone_number: "99999999",
    status: "single",
  },
  {
    key: "3", // change to string
    name: "Ahmed Alakhtar",
    age: 32,
    address: "New York No. 1 Lake Park",
    description:
      "My name is Ahmed Alakhtar, I am 29 years old, living in New York No. 1 Lake Park. ",
    occupation: "AI engineer",
    phone_number: "111111111",
    status: "single",
  },
];

const columnsNewTable: TableColumnsType<DataTypeNew> = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
  },
  { title: "Age", dataIndex: "age", key: "age" },
  { title: "Address", dataIndex: "address", key: "address" },
  { title: "Descritpion", dataIndex: "description", key: "description" },
];

.... another code

<Table<DataTypeNew>
      columns={columnsNewTable}
      dataSource={datanew}
      pagination={false}
/>

Notice that in columnsNewTable I remove the Table.EXPAND_COLUMN. this time make sure the columnsNewTable is INSIDE the function.

then te result would be like this.

okay the base table is created successfully, we now pose the real challenge. what’s to do next? firstly, I will create the new column called “action” and place the triggerer inside this column.

 const columnsNewTable: TableColumnsType<DataTypeNew> = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
    },
    { title: "Age", dataIndex: "age", key: "age" },
    { title: "Address", dataIndex: "address", key: "address" },
    { title: "Descritpion", dataIndex: "description", key: "description" },

    // Start of: new code
    {
      title: "Action",
      key: "action",
      render(value, record, index) {
        return (
          <div className="flex items-center cursor-pointer ">
            <p> Details </p>
          </div>
        );
      },
    },
   // End of: new code
  ];

with this in place, it still doesn’t have the triggerer functionality but it does showing the action column with each has “Details” UI inside of it.

to create it’s functionality back to the table and we will utilize the onExpand and expandedRowKeys API.

adjust the table component like this.

 <Table<DataTypeNew>
            columns={columnsNewTable}
            dataSource={datanew}
            pagination={false}
            expandable={{
              expandedRowRender: (record) => {
                return <div>{expandableUIRow(record)}</div>;
              },
              onExpand: (expanded, record) => {
                // code the logic in here

              }
            }}
          />

because onExpand itself is a function that returns nothing, we have to create the logic inside those function. to create the functionality we create new function and pass those two parameters (expanded and record) to another function we should create utlizing the useState.

  const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);

  const handleExpand: ({
    expanded,
    record,
  }: {
    record: DataTypeNew;
    expanded?: boolean;
  }) => void = ({ expanded, record }) => {

    setExpandedRowKeys((prev) => {
      return prev.includes(record.key)
        ? prev.filter((key) => key !== record.key)
        : [...prev, record.key];
    });

  };

if you curious what does this function do, it simply means that if some row is expanded then the key of that row will be stored in expandedRowKeys leading to expanded version of table. for example if we refer to our data before.

const datanew: DataTypeNew[] = [
  {
    key: "1", // notice in this
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    description:
      "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park. ",
    occupation: "Software Engineer",
    phone_number: "8888888888",
    status: "married",
  },
  {
    key: "2", // notice in this
    name: "John Smith",
    age: 32,
    address: "New York No. 1 Lake Park",
    description:
      "My name is John Smith, I am 27 years old, living in New York No. 1 Lake Park. ",
    occupation: "Network Engineer",
    phone_number: "99999999",
    status: "single",
  },
  {
    key: "3", // notice in this
    name: "Ahmed Alakhtar",
    age: 32,
    address: "New York No. 1 Lake Park",
    description:
      "My name is Ahmed Alakhtar, I am 29 years old, living in New York No. 1 Lake Park. ",
    occupation: "AI engineer",
    phone_number: "111111111",
    status: "single",
  },
];

suppose you want to expand the John smith then the expandedRowKeys would be
["2"]
if you expand another table again suppose Ahmed Alakhtar then it would like this:
["2", "3"]
and so on.

after we create the logic function above we have to intregate those function inside Table components like this

<Table<DataTypeNew>
            columns={columnsNewTable}
            dataSource={datanew}
            pagination={false}
            expandable={{
              expandedRowRender: (record) => {
                return <div>{expandableUIRow(record)}</div>;
              },
              expandedRowKeys: expandedRowKeys, // add this
              showExpandColumn: false, // add this
              onExpand: (expanded, record) => {
                // code the logic in here
                handleExpand({ expanded, record }); // add this
              },
            }}
          />

make sure showExpandColumn is false so it didn’t show the default triggerer from Antd.

after this don’t forget to implement it to our Table Column like this

  const columnsNewTable: TableColumnsType<DataTypeNew> = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
    },
    { title: "Age", dataIndex: "age", key: "age" },
    { title: "Address", dataIndex: "address", key: "address" },
    { title: "Descritpion", dataIndex: "description", key: "description" },
    {
      title: "Action",
      key: "action",
      render(value, record, index) {
        return (
          <div
            className="flex items-center cursor-pointer "
            onClick={() => handleExpand({ record })} // add this code
          >
            <p> Details </p>
          </div>
        );
      },
    },
  ];

with all this set up the result should be as expected. show below

this is what I meant about controlling over. this give you flexibility and customability about your function, of course it comes with the price with extra steps and customization. all the control over lies in this code

  const handleExpand: ({
    expanded,
    record,
  }: {
    record: DataTypeNew;
    expanded?: boolean;
  }) => void = ({ expanded, record }) => {

    setExpandedRowKeys((prev) => {
      return prev.includes(record.key)
        ? prev.filter((key) => key !== record.key)
        : [...prev, record.key];
    });

  };

you can literally do everything you need in above function. need example?

let’s see the example below.

Step 6: Dynamic Data Example

okay let’s try this. for example I want to make sure each row that I clicked is fetch the detail about its data from API like I mentioned before. you can do like this

 const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
  const [isTriggerFetchDataFromAPI, setIsTriggerFetchDataFromAPI] =
    useState<boolean>(false); // add this
  const [keyEachRow, setKeyEachRow] = useState<string>(""); // add this

  const handleExpand: ({
    expanded,
    record,
  }: {
    record: DataTypeNew;
    expanded?: boolean;
  }) => void = ({ expanded, record }) => {
    setKeyEachRow(record.key); // add this

    // Start of: add this
    if (expandedRowKeys.includes(record.key)) { 
      setIsTriggerFetchDataFromAPI(false);
    } else {
      setIsTriggerFetchDataFromAPI(true);
    }
    // End of: add this

    setExpandedRowKeys((prev) => {
      return prev.includes(record.key)
        ? prev.filter((key) => key !== record.key)
        : [...prev, record.key];
    });
  };

because I don’t have any Rest API calls so I simulate it with shimmer loading so the result as if fetching dinamycally. still in the page.tsx create like this

  const [loadingEachRows, setLoadingEachRows] = useState<{
    [key: string]: boolean;
  }>({});

  const FetchAPI = useCallback(() => {
    setLoadingEachRows((prev) => ({
      ...prev,
      [keyEachRow]: true,
    }));

    setTimeout(() => {
      setLoadingEachRows((prev) => ({
        ...prev,
        [keyEachRow]: false,
      }));
    }, 3000);
  }, [keyEachRow]);

  useEffect(() => {
    if (isTriggerFetchDataFromAPI) {
      FetchAPI();
      setIsTriggerFetchDataFromAPI(false);
    }
  }, [isTriggerFetchDataFromAPI, FetchAPI]);

don’t forget you need to change the respond expandableHTML too, since I don’t want to break it with the first table so I create new Expandable UI base on expandableHTML like this

const expandableUIRowNew: (record: DataTypeNew) => JSX.Element = (record) => {
    const isLoading = loadingEachRows[record.key] || false;

    return (
      <section className="grid gap-8 p-2 grid-cols-2 max-w-[1000px]">
        <div>
          <div>
            <span className="font-bold">Name: </span>{" "}
            {isLoading ? (
              <Skeleton.Button
                active
                style={{ maxHeight: 20, minWidth: 100 }}
              />
            ) : (
              record.name
            )}
          </div>

          <div>
            <span className="font-bold">Age: </span>{" "}
            {isLoading ? (
              <Skeleton.Button
                active
                style={{ maxHeight: 20, minWidth: 100 }}
              />
            ) : (
              record.age
            )}
          </div>
          <div>
            <span className="font-bold">Address: </span>{" "}
            {isLoading ? (
              <Skeleton.Button
                active
                style={{ maxHeight: 20, minWidth: 200 }}
              />
            ) : (
              record.address
            )}
          </div>
          <div>
            <span className="font-bold">Description: </span>{" "}
            {isLoading ? (
              <Skeleton.Button
                active
                style={{ maxHeight: 20, minWidth: 250 }}
              />
            ) : (
              record.description
            )}
          </div>
        </div>

        <div>
          <div>
            <span className="font-bold">Occupation: </span>{" "}
            {isLoading ? (
              <Skeleton.Button
                active
                style={{ maxHeight: 20, minWidth: 100 }}
              />
            ) : (
              record.occupation
            )}
          </div>
          <div>
            <span className="font-bold">Phone: </span>{" "}
            {isLoading ? (
              <Skeleton.Button
                active
                style={{ maxHeight: 20, minWidth: 100 }}
              />
            ) : (
              record.phone_number
            )}
          </div>
          <div>
            <span className="font-bold">Status: </span>{" "}
            {isLoading ? (
              <Skeleton.Button
                active
                style={{ maxHeight: 20, minWidth: 100 }}
              />
            ) : (
              record.status
            )}
          </div>
        </div>
      </section>
    );
  };

here I’m utilizing the Skeleton Component from antd to create shimmer loading. next don’t forget change the table too like this

    <Table<DataTypeNew>
            columns={columnsNewTable}
            dataSource={datanew}
            pagination={false}
            expandable={{
              expandedRowRender: (record) => {
                return <div>{expandableUIRowNew(record)}</div>; // change this 
              },
              expandedRowKeys: expandedRowKeys,
              showExpandColumn: false,
              onExpand: (expanded, record) => {
                // code the logic in here
                handleExpand({ expanded, record });
              },
            }}
          />

its all sets, the result should be as expected like below

Pretty Cool Right!. That’s it from this Tutorial, I hope you will get better understanding about the Table and expandable thing.

I build production apps using React, Next.js, and Ant Design, and over time I’ve collected many practical solutions to common UI challenges. The ‘Maneuver’ series shares these insights, tested in real projects, to help other developers avoid reinventing the wheel. I Hope you can get benefit from it.

Key takeaway

It really comes down to how much control you need. If the out-of-the-box behavior already fits your requirements, don’t over-engineer it. But when the default options fall short, that’s the time to take full control of your Table component.

Repository for this Tutorial in here.
Demo for this Tutorial in here.

See you on the next part of “Maneuver” Series :D

DEV Community: Achmad Muqorrobin

Implement Local & Google Fonts in Next.js (The Right way): A Practical Pattern Guide

TL;DR

Table of Contents

PART I - IMPLEMENTATION

Chapter 1 - Setup

Chapter 2 - the usage

Method 1: Classname

Method 2: Variable

⚠️ Chapter 3 - Arbitrary values (Important)

Chapter 4 - Multiple Local Fonts

IMPROVEMENT

PART I Summary

PART II - PATTERN

Chapter 5 - Multiple Fonts

IMPROVEMENT

PART II Summary

That’s it.

Customize Expandable Tables in Ant Design — Controlled vs. Uncontrolled Approaches

Intro: Why Maneuver?

Setup

PART I

Step 1: Base Table

Step 2: Expandable Basics

Step 3: Custom Trigger

Step 4: Custom Expand Content

PART II

Step 5: Full Control with State

Step 6: Dynamic Data Example

Key takeaway