How to set meta charset to utf-16 instead of utf-8 in Next.js? #80403

masadamsahid · 2025-06-11T07:53:53Z

masadamsahid
Jun 11, 2025

Summary

I'm working on a Next.js application (currently using version 15.3.2) and I'm looking to ensure the charset meta tag is correctly set in the HTML head. Typically, in a standard HTML file, I would just include <meta charset="utf-16"> within the <head> tag. But in next js it seems I can't manually set like that.

So, in my UI design, the emojis look like this:

While in my Next.js app they look like this:

As you can see, in my Next.js app, the emojis in the applied and interview cards are really different from the UI design. This problem is caused by the <meta charset="utf-8"> which is rendered by Next.js by default. I'm really sure about it, because previously I actually already made the same project in vanilla HTML, CSS, and JS (no framework at all) and manually set it to utf-16 in the <head> tag and it works as expected in the UI design.

What I've tried

However, when I implement it in my Next.js app, it doesn't work. And here are what I've tried when trying implementing it:

1. Using the `<meta>` tag inside a `<head>` tag:

// app/layout.tsx
import type { Metadata } from "next";
import { Inter, Outfit, Plus_Jakarta_Sans } from "next/font/google";
import "./globals.css";
import GlobalDrawer from "@/components/GlobalDrawer";

const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin"]
});


const outfit = Outfit({
  variable: "--font-outfit",
  subsets: ["latin"],
});

const plusJakartaSans = Plus_Jakarta_Sans({
  variable: "--font-plus-jakarta-sans",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Jobtracker App",
  description: "Jobtracker App by Team C",
};

// export async function generateMetadata() {
//   return {
//     charset: 'utf-16',

//     title: "Jobtracker App",
//     description: "Jobtracker App by Team C",
//   };
// }

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-16"/>
      </head>
      <body className={`${outfit.variable} ${plusJakartaSans.variable} ${inter.variable}`}>
        <GlobalDrawer />
        {children}
      </body>
    </html>
  );
}

When I was using this, I checked the browser's Elements dev tool and found that there are two <meta> tags setting the charset to utf-8 and utf-16 with the utf-8 come in the first place before the utf-16 like in the screenshot below.

2. Using the `generateMetada` function:

// app/layout.tsx
import type { Metadata } from "next";
import { Inter, Outfit, Plus_Jakarta_Sans } from "next/font/google";
import "./globals.css";
import GlobalDrawer from "@/components/GlobalDrawer";

const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin"]
});


const outfit = Outfit({
  variable: "--font-outfit",
  subsets: ["latin"],
});

const plusJakartaSans = Plus_Jakarta_Sans({
  variable: "--font-plus-jakarta-sans",
  subsets: ["latin"],
});

// export const metadata: Metadata = {
//   title: "Jobtracker App",
//   description: "Jobtracker App by Team C",
// };

export async function generateMetadata() {
  return {
    charset: 'utf-16',

    title: "Jobtracker App",
    description: "Jobtracker App by Team C",
  };
}

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

When using this generateMetadata, it still renders the <meta charset="utf-8"> instead of setting it to utf-16 as I specified in the generateMetada like in the picture below, no <meta charset="utf-16"> rendered or set.

My Questions:

How to properly set the charset to utf-16 instead of the Next.js's default utf-8? Any insights or recommended patterns would be greatly appreciated!

Next.js Version: 15.3.2
React Version: 19.0.0

My project is experimental and the repo is public. You can access it here:
https://github.com/masadamsahid/nextjs-jobtracker-app

Additional information

No response

Example

No response

Answered by icyJoseph

Jun 11, 2025

Microsoft has some special emoji handling.

What's the computed font family used in your emojis?

https://youtu.be/gd5uJ7Nlvvo?t=3201

Yeah the OS has a say on this... I don't think you are supposed to have anything other than charset set to utf-8 neither.

Can you try adding something like https://fonts.google.com/noto/specimen/Noto+Color+Emoji and make sure that font family is applied to the spans rendering emoji? Also, probably good to add some a11y:

<span aria-label="a rocket blasting off" role="img">🚀</span>

View full answer

icyJoseph · 2025-06-11T08:39:28Z

icyJoseph
Jun 11, 2025
Collaborator

I can't really reproduce. Are you on windows OS?

4 replies

masadamsahid Jun 11, 2025
Author

Hi! Yeah. I'm on Windows, Node.js v24.1.0, npm 11.3.0, and using the Brave Browser. Btw, does it have anything to do with the client's OS?

icyJoseph Jun 11, 2025
Collaborator

Microsoft has some special emoji handling.

What's the computed font family used in your emojis?

https://youtu.be/gd5uJ7Nlvvo?t=3201

Yeah the OS has a say on this... I don't think you are supposed to have anything other than charset set to utf-8 neither.

Can you try adding something like https://fonts.google.com/noto/specimen/Noto+Color+Emoji and make sure that font family is applied to the spans rendering emoji? Also, probably good to add some a11y:

<span aria-label="a rocket blasting off" role="img">🚀</span>

Answer selected by masadamsahid

icyJoseph Jun 11, 2025
Collaborator

Could you paste a screenshot of what you see here, the two crying emojis, https://stackblitz.com/edit/github-7yif7tx8?file=src%2Fapp%2F(home)%2Fpage.tsx,src%2Fapp%2Flayout.tsx

I see this:

masadamsahid Jun 11, 2025
Author

Ah. I got it now.

And I tried comparing several emojis. And it seems the emojis I expected work as expected when using the Noto font family.

Many thanks @icyJoseph 🙌

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

How to set meta charset to utf-16 instead of utf-8 in Next.js? #80403

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

How to set meta charset to utf-16 instead of utf-8 in Next.js? #80403

Uh oh!

masadamsahid Jun 11, 2025

Summary

What I've tried

1. Using the <meta> tag inside a <head> tag:

2. Using the generateMetada function:

Additional information

Example

Replies: 1 comment · 4 replies

Uh oh!

Uh oh!

icyJoseph Jun 11, 2025 Collaborator

Uh oh!

Uh oh!

masadamsahid Jun 11, 2025 Author

Uh oh!

icyJoseph Jun 11, 2025 Collaborator

Uh oh!

Uh oh!

icyJoseph Jun 11, 2025 Collaborator

Uh oh!

masadamsahid Jun 11, 2025 Author

masadamsahid
Jun 11, 2025

1. Using the `<meta>` tag inside a `<head>` tag:

2. Using the `generateMetada` function:

Replies: 1 comment 4 replies

icyJoseph
Jun 11, 2025
Collaborator

masadamsahid Jun 11, 2025
Author

icyJoseph Jun 11, 2025
Collaborator

icyJoseph Jun 11, 2025
Collaborator

masadamsahid Jun 11, 2025
Author