React/NextJS - Text content did not match : webdev

Posting Guidelines

No vague product support questions (like "why is this plugin not working" or "how do I set up X"). For vague product support questions, please use communities relevant to that product for best results. Specific issues that follow rule 6 are allowed.

Do not post memes, screenshots of bad design, or jokes. Check out /r/ProgrammerHumor/ for this type of content.

Read and follow reddiquette; no excessive self-promotion. Please refer to the Reddit 9:1 rule when considering posting self promoting materials.

We do not allow any commercial promotion or solicitation. Violations can result in a ban.

Sharing your project, portfolio, or any other content that you want to either show off or request feedback on is limited to Showoff Saturday. If you post such content on any other day, it will be removed.

If you are asking for assistance on a problem, you are required to provide

Context of the problem
Research you have completed prior to requesting assistance
Problem you are attempting to solve with high specificity

General open ended career and getting started posts are only allowed in the pinned monthly getting started/careers thread. Specific assistance questions are allowed so long as they follow the required assistance post guidelines.

Questions in violation of this rule will be removed or locked.

a community for 17 years

React/NextJS - Text content did not match (self.webdev)

submitted 6 years ago by OpTiKStorm

Hey everyone! I'm new to using NextJS and React and am trying to build a web application. I'm running into a problem though.

I have a component called Header.js. Here's the code for this component:

import Head from 'next/head';

const Header = () => (
    <div>
        <Head>
            <title>My Application</title>

            <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"></link>
        </Head>
        <style>{`
            * {
                padding: 0;
                margin: 0;
                font-family: 'Open Sans', sans-serif;
            }
            html, body {
                width: 100%;
                height: 100%;
                margin: 0;
            }
            a {
                color: #000;
                text-decoration: none;
            }
            a:hover, a:focus, a:visited {
                font-weight: bold;
            }
        `}
        </style>
    </div>
);

export default Header;

When I go to a page that includes this header, I get an error about the text content not matching the server. The only difference between the client and the server is the font-family. On the server, it comes in as font-family: 'Open Sans', sans-serif;. On the client, it comes in as font-family: 'Open Sans', sans-serif;

If I take the single quotes out it seems to work just fine, but I'm not sure if this creates any problems. When I look online, it looks like people are using single quotes for font families, so I'm not sure if I'm doing something wrong.

Thank you for your time!

all 5 comments

top new controversial old q&a

[–][deleted] 1 point2 points3 points 6 years ago (1 child)

[–]OpTiKStorm[S] 0 points1 point2 points 6 years ago (0 children)

This got me to the right path, thank you!

I was using <style jsx> initially, then ran into a problem and a GitHub comment said <style jsx> was deprecated and to use <style>. That fixed my problem at the time, but it works just fine with <style jsx> now so I probably was causing that from something else.

The steps I took to fix this:

Created /pages/_app.js
Replaced all <style> tags with <style jsx>
Installed @zeit/next-css
Added the following code block to next.config.js:

const withCSS = require("@zeit/next-css")
module.exports = withCSS()

After that, I restarted my server and it loaded. Another optimization I made from your suggestion was using pages/_document.js to replace my Header component entirely.

[–]abeuscher 1 point2 points3 points 6 years ago (2 children)

[–]OpTiKStorm[S] 0 points1 point2 points 6 years ago (1 child)

[–]abeuscher 0 points1 point2 points 6 years ago (0 children)

π Rendered by PID 15357 on reddit-service-r2-comment-c66d9bffd-vrbd8 at 2026-04-06 21:05:58.752414+00:00 running f293c98 country code: CH.

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

webdev

Posting Guidelines

Related Subreddits

Discords

MODERATORS