What is the correct way to integrate the Ant Design library with Next.js for seamless server-side rendering?

Question

What is the correct way to integrate the Ant Design library with Next.js for seamless server-side rendering?

I duplicated the official Next.js example using Ant Design at this link: https://github.com/vercel/next.js/tree/canary/examples/with-ant-design

After cloning, I proceeded with npm install to install all dependencies. Then, I ran npm run dev to check if everything was working fine. Subsequently, I used npm run build to build the Next.js app and executed npm run start to run the built app on localhost.

The issue arose when I went to the network tab, selected the localhost page, and previewed it from the preview tab. The Ant Design styles were not being applied properly with server-side rendering, resulting in no visible styles at all initially. It took about half a second for the Ant Design CSS to finally apply, which is not the desired outcome.

Is there a way to properly implement Ant Design with Next.js server-side rendering?

javascript next.js ant-design-pro

Answer 1

Answer №1

If you're seeking a way to optimize the loading of CSS on your website, consider inlining the CSS directly into the HTML. This can help speed up the rendering process by eliminating the need for the browser to make separate requests for CSS resources.

While official support for this feature is still pending, there is a workaround available. You can check out more details and updates on this matter at https://github.com/vercel/next-plugins/issues/364.

In the meantime, you can implement the workaround mentioned in https://github.com/vercel/next-plugins/issues/238. I have personally tested this solution and can confirm that it works effectively.

To inline the CSS, you will need to create a file named _document.js within the pages folder. Copy and paste the code below into this file:

import Document, { Head, Main, NextScript } from 'next/document';
import fs from 'fs';
import path from 'path';

class CustomNextHead extends Head {
  // Potential workaround until built-in support is added
  getCssLinks({ allFiles }) {
    return allFiles
      .filter((file) => file.endsWith('.css'))
      .map((file) => (
        <style
          key={file}
          nonce={this.props.nonce}
          dangerouslySetInnerHTML={{
            __html: fs.readFileSync(path.join('.next', file), 'utf-8'),
          }}
        />
      ));
  }
}

export default class MyDocument extends Document {
  render() {
    return (
      <html lang="en">
        <CustomNextHead />
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

Answer 2

If you're seeking a way to optimize the loading of CSS on your website, consider inlining the CSS directly into the HTML. This can help speed up the rendering process by eliminating the need for the browser to make separate requests for CSS resources.

While official support for this feature is still pending, there is a workaround available. You can check out more details and updates on this matter at https://github.com/vercel/next-plugins/issues/364.

In the meantime, you can implement the workaround mentioned in https://github.com/vercel/next-plugins/issues/238. I have personally tested this solution and can confirm that it works effectively.

To inline the CSS, you will need to create a file named _document.js within the pages folder. Copy and paste the code below into this file:

import Document, { Head, Main, NextScript } from 'next/document';
import fs from 'fs';
import path from 'path';

class CustomNextHead extends Head {
  // Potential workaround until built-in support is added
  getCssLinks({ allFiles }) {
    return allFiles
      .filter((file) => file.endsWith('.css'))
      .map((file) => (
        <style
          key={file}
          nonce={this.props.nonce}
          dangerouslySetInnerHTML={{
            __html: fs.readFileSync(path.join('.next', file), 'utf-8'),
          }}
        />
      ));
  }
}

export default class MyDocument extends Document {
  render() {
    return (
      <html lang="en">
        <CustomNextHead />
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

What is the correct way to integrate the Ant Design library with Next.js for seamless server-side rendering?

Answer №1

Similar questions

Streaming data from a MongoDB database in a serverless Next.js application

Dynamic autocomplete feature with AJAX integration for filtering in Flask

Is it possible in Vue.js to create a reactive functionality for a button using a watcher for "v-if" condition?

Changing the event handler of a jQueryUI accordion dynamically from "click" to "mouseover" as needed

Using JavaScript to implement CSS3 with multiple background images

What is the best way to retrieve a value from a function that contains multiple nested functions in Javascript?

What is the method for displaying html files in a POST request?

showing javascript strings on separate lines

"Comparison: Java Installation vs. Enabling Java in Your Web Browser

Alter the Vue view using an object instead of the url router

Problem identified with Vue.js: The Log in screen briefly flashes before redirecting the authenticated user (resulting in a full page refresh)

Utilizing $.getJSON to initiate a selection change event

Is there a quicker method than using document.getElementById('element-id').innerHTML to retrieve content?

Ways to update a div periodically with new data fetched from a file - Here's How!

Making AngularJS 'PUT' requests: The process of submitting only the data in a form

Using JQUERY to create a dropdown menu that dynamically changes based on the date field

When utilizing the React API Fetch, there may be instances where not all data is returned. However

`Assembling HTMX with Tailwind Css and Shadcn UI: A Comprehensive Guide`

Audio suddenly no longer working after transferring project to React

Issues with loading an external CSS file in an HTML document