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

Changing the Flash message to an Alert message in Symfony2: A step-by-step guide

Avoid the rendering of child elements in React

What are the best practices for utilizing databases with both Javascript and JSF frameworks?

Angular 6 TypeScript allows for efficient comparison and updating of keys within arrays of objects. By leveraging this feature

How to use Javascript to fetch HTML content from an external website

Mastering the Art of SQL Submission with PHP Ajax Requests

The Autocomplete field's label remains visible even after the form is submitted

Using query parameters in Angular to interact with APIs

Error message appearing repeatedly and submit button functioning only after second click

Unable to use .ajax within autocomplete function

The React router implementation is resulting in a blank index page when using Next.js

Using AJAX to submit a single form

Authentication of users in Django and NextJS

The Angular bootstrap popover vanishes as soon as the mouse hovers over it

Customized slider in jQuery UI allowing users to select height using a scaled ruler

Learn the ins and outs of Ember.js with our comprehensive tutorial and guide. Discover solutions to common issues such as DS

Issue with reactivity not functioning as expected within VueJS loop without clear explanation

Prevent further execution upon callback in an AJAX request by stopping the click event function

Guide on transferring data from an API using mapped React hooks

React-Redux Error: The function this.props.AppendCharacter is not defined