Issue with rendering classes in Next.js: Why is a class being inadvertently applied to a different element?

Question

Issue with rendering classes in Next.js: Why is a class being inadvertently applied to a different element?

When one element should be displayed while the other should not, they are given classes based on their relationship with each other. View code

There is a login button component with a border gradient, along with an avatar component.

Login button component

Avatar component

Initially, the avatar component has the same class as the authorization component.

Mutating component

This bug occurs both during development hot module replacement and in production. Switching to other pages resolves the issue temporarily.

This bug is present in various parts of the project where we use styled-components, classnames, scss, bootstrap, and mui. We plan to remove boostrap && scss soon. We are using next.js for server side rendering and typescript.

Here is another example: Initial page load

After navigating to a different page

typescript sass next.js styled-components server-side-rendering

Answer 1

Answer №1

For those looking to incorporate styled-components into a Next.js project, especially for server-side rendering (SSR), there are specific guidelines to follow. It's important to note that styled-components operates at runtime, which may not align smoothly with serverside rendering. To ensure optimal performance, it's necessary to pre-render the styles.

Refer to this link for official instructions on using styled-components in Next.js and explore an example of its implementation with Next.js through this link.

If you decide to leverage the provided links for setting up your project and are working with next.js version 12 or above, be aware of some minor adjustments required. With next.js moving away from babel for rendering projects, utilize the next.config.js file instead. Simply set experimental.styledComponents to true within this file to eliminate the need for babel configuration.

/** @type {import("next").NextConfig} */
const config = {
    experimental: {
        styledComponents: true,
    },
};

module.exports = config;

Answer 2

For those looking to incorporate styled-components into a Next.js project, especially for server-side rendering (SSR), there are specific guidelines to follow. It's important to note that styled-components operates at runtime, which may not align smoothly with serverside rendering. To ensure optimal performance, it's necessary to pre-render the styles.

Refer to this link for official instructions on using styled-components in Next.js and explore an example of its implementation with Next.js through this link.

If you decide to leverage the provided links for setting up your project and are working with next.js version 12 or above, be aware of some minor adjustments required. With next.js moving away from babel for rendering projects, utilize the next.config.js file instead. Simply set experimental.styledComponents to true within this file to eliminate the need for babel configuration.

/** @type {import("next").NextConfig} */
const config = {
    experimental: {
        styledComponents: true,
    },
};

module.exports = config;

Issue with rendering classes in Next.js: Why is a class being inadvertently applied to a different element?

Answer №1

Similar questions

Using TypeScript and Angular to remove properties from an object

When deployed on Vercel, the NextAuth /api/auth/* endpoint consistently returns a 404 error, despite functioning properly

Server hosted by Moralis

Any idea how to resolve this typescript typing issue: "The argument, either a string or number, cannot be assigned to the parameter of type 'SetStateAction<string>'"?

Why does my Next.js server abruptly stop after I start it up?

What is the best way to implement lazy loading for headless UI Dialog components in a React

Set an array to a JSON object as a fresh entity

What is the best way to consistently and frequently invoke a REST API in Angular 8 using RxJS?

Images appear as plain text in the preview of VUE 3 (with TypeScript)

Enforcement of Class Initialization in Typescript 2.7

13 upcoming issues with server components related to cookies

Steps for resetting the TypeScript version in VSCode:

Struggling to bypass server side rendering in Next.js and display dynamic component exclusively on the client side

Using Next.js to pass data as an object in a getStaticProps function

Is it possible to host a Next JS and Pocketbase project on any server?

How can I replace the index.d.ts file from a third-party library in Typescript with my own custom definitions?

How can I create an Array of objects that implement an interface? Here's an example: myData: Array<myInterface> = []; However, I encountered an issue where the error message "Property 'xxxxxx' does not exist on type 'myInterface[]'" appears

What is preventing me from adjusting the padding of the mat-button?

Tips for obtaining a shipping address during a Stripe subscription Checkout process

The Angular 2 view will remain unchanged until the user interacts with a different input box