title error?...
Unanswered
West Highland White Terrier posted this in #help-forum
West Highland White TerrierOP
Hello, I have a question because I am having trouble writing meta title in head tag. Please help me...When the page loads like in the picture, the title blinks when I refresh it. I didn't change any other settings. Is that normal?
46 Replies
Blood cockle
what do you mean it blinks?
West Highland White TerrierOP
If you refresh or load the page, the code will be rendered. Blinking? It's like that
Blood cockle
that doesnt help "what do you mean by blinking?" "blinking? it's blinking"
maybe share your code or something
West Highland White TerrierOP
Um... Should I say that the code is rendered?
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import Head from "next/head";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={
>
{children}
</body>
</html>
);
}
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import Head from "next/head";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={
${geistSans.variable} ${geistMono.variable} antialiased}>
{children}
</body>
</html>
);
}
Blood cockle
looks normal to me
West Highland White TerrierOP
Yes, but if you press refresh like in the picture, it becomes like that
Blood cockle
what picture?
the only picture you posted was
<title>Create Next App</title>here's the relevant section, which you seem to have done fine.
https://nextjs.org/docs/app/building-your-application/optimizing/metadata
https://nextjs.org/docs/app/building-your-application/optimizing/metadata
West Highland White TerrierOP
Blood cockle
youre taking a picture of your code editor
not your website
are you asking about a problem with your code editor?
West Highland White TerrierOP
No! That light? I wonder if it's normal or abnormal to come in...
I'm not good at English, so please understand if it's frustrating
Every time I press refresh, the light comes on. Is it a rendering problem? It's hard
The photos were captured by the developer's tool
Blood cockle
take a bigger picture.
full screen picture maybe
without more info, it seems fine
the "light" does nothing, right? it's only a problem when you open developer tools and mess around?
bro
just share the full screen
you are cutting off information that could be useful
like what youre doing inside developer tools. whether youre targeting a specific element
West Highland White TerrierOP
I cut it like that so that you can see it well. There's nothing else but that part!
Blood cockle
well based on the information youre giving, it's normal.
it's fine. no problems.
West Highland White TerrierOP
Yes, but the title page works fine, but when I asked gpt, they told me that blinking is a serious error
Is it normal for the light to flicker like that? It blinks only once when refreshing and seems to be working normally
Blood cockle
based on the information given, it's working fine.
if it bothers you, you can try using a different browser and see if it does the same thing
West Highland White TerrierOP
Oh, but why is gpt called an error? Gpt says it's a Hydration ssr rendering error
Blood cockle
you want me to explain why gpt might be wrong?
here's proof.
if you believe the devs at nextjs know how to code a basic site
you can open that docuimentation page https://nextjs.org/docs/app/building-your-application/optimizing/metadata
and watch the developer tools
if it does the same thing as youre worried about, you can be pretty sure it's working ok
West Highland White TerrierOP
ok, so there's no problem with the light coming on?
There’s nothing wrong with that tho, don’t worry about it. I understand what you’re saying, but when you refresh the page the browser mounts the
Same would happen if you had different components that are mounding or re-rendering. The blue blinking light will show every time a HTML tag gets mounted or one of its properties changed.
<title> tag and that’s probably why you’re seeing it blinking in blue. Same would happen if you had different components that are mounding or re-rendering. The blue blinking light will show every time a HTML tag gets mounted or one of its properties changed.
West Highland White TerrierOP
Thank you I thought it was something serious because gpt kept saying error
When you encounter a real error working in Next.js you’ll get instant feedback (most of the times) or your app won’t even run
@West Highland White Terrier mark the solution btw