Error: Hydration failed because the initial UI does not match what was rendered on the server.
Unanswered
Approval CYB posted this in #help-forum
49 Replies
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<main>{children}</main>
</body>
</html>
)
}@Approval CYB Click to see attachment
show your file structure
Sandwich Tern
Is it just a local issue ?
"use client";
import { AppProps } from 'next/app';
import Layout from '../app/layout';
const MyApp = ({ Component, pageProps }: AppProps) => {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
};
export default MyApp;import "../styles/Global.Style.css"
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<main>{children}</main>
</body>
</html>
)
}@Sandwich Tern Is it just a local issue ?
I get no other errors.
Common carp
Do not mix
app router and pages routerchange the file names?
Common carp
It seems
pages router renders first and it contains <html> tag within another tag<html> tag should be the most outside tag@Approval CYB change the file names?
Common carp
change the structure
You don't need
_app.tsxpages router doesn't support React Server Components@Common carp `pages` router doesn't support `React Server Components`
they do support ssr lol. But by default they are client components
Common carp
React Server Components are different from ssr
@Approval CYB change the file names?
but yea, what Austin says: dont mix them. Either use pages router or app router. In this case you render a "html" tag again, but an html tag already exists
Common carp
in your case
- in the server, only
- in ther client
- in the server, only
<html> rendered- in ther client
<MyApp><RootLayout><html> renderedthis mismatch causes the hydration error
understand?
Got it. You said I don't need __app.tsx. removing the file corrupted the page structure
@B33fb0n3 but yea, what Austin says: dont mix them. Either use pages router or app router. In this case you render a "html" tag again, but an html tag already exists
Common carp
either use pages router or app router
If I move the layout.tsx file out of the app folder
@B33fb0n3 ?
Common carp
?
you don't understand @B33fb0n3 ?
@Common carp you don't understand <@301376057326567425> ?
I don't understand, why you reply me with excatly the same, that I said
Common carp
strange guy
@Common carp in your case
- in the server, only `<html>` rendered
- in ther client `<MyApp><RootLayout><html>` rendered
Common carp
@Approval CYB , this is the reason
@Common carp Do not mix `app` router and `pages` router
Common carp
and this is the solution
Okay. Thank you, that solves my problem. but I have one more question if you have time.
Common carp
sure, go ahead
I use axios to request the api "api/getVideoInfo?url:url" and get the video information.
data is coming but useState operations are not working. I cannot show the required data on the web page
I send the data that should come to the console log section. but the array comes back empty.
Do I need to write something like a hold function?
Common carp
not sure if you receive the response
@Approval CYB Do I need to write something like a hold function?
Common carp
no need
that code looks good to me
Response. I tried the api on the web page.
Common carp
please log response on the console and show me
@Common carp Click to see attachment
I don't understand. Is there something wrong where you're pointing?
Common carp
i can't solve it until i check the code