When I'm creating NextJS projects(i'm still practicing). It always ask me about 5 things which is
Typescript - No / Yes ESLint - No / Yes src / directory - No / Yes app / directory ( I forgot just imagine it when you creating one) - No / Yes imports '@/' - No / Yes
And I always input Yes-Yes-No-No-Yes since I know typescript and ESLint, but I don't know how the path works with CSS.
so the folder was created something like this
-pages
-public
-styles
so basically I have this in pages/_app.tsx
right
import 'bootstrap/dist/css/bootstrap.min.css'
import '@/styles/globals.css'
and then in my styles I have two css which is navbar.module.css and global.module.css
but the thing is that I can make like naming module css right like pass it to the className
's?
So this is in my navbar.module.css
.navbar_header {
display: flex;
align-items: center;
justify-content: center;
padding: 30px 50px;
}
.navbar_parent {
display: flex;
align-items: center;
justify-content: space-evenly;
padding: 10px;
background: rgba(255, 230, 0, 0.46);
box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.39);
border-radius: 30px;
}
.links {
padding: 5px;
background: linear-gradient(180deg, #FFC27B 0%, #FFE91F 85.42%);
border-radius: 15px;
width: 150px;
display: flex;
align-items: center;
justify-content: center;
}
And at the part of pages/navbar.tsx I pass there my navbar.module.css
import Link from 'next/link'
import React from 'react'
import styles from '@/styles/navbar.module.css'
const Navbar = () => {
return (
<div className={styles.navbar_header}>
<div className={styles.navbar_parent}>
<Link className={styles.links} href={'/'}>
<h5>
Home
</h5>
</Link>
<Link className={styles.links} href={'/authentication/auth'}>
<h5>
Sign Up / Log In
</h5>
</Link>
</div>
</div>
)
}
export default Navbar
Also in my pages/index.tsx I have this code
import Head from 'next/head';
import Navbar from './navbar';
export default function Home() {
return (
<>
<Head>
<link rel="icon" href="/p5.png" />
<title> Next.JS Designing </title>
</Head>
<body>
<Navbar/>
</body>
</>
)
}
and I always get this thing. error in front of the website.
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
Is there something wrong I miss here?
Nvm the error came from <body></body>
that was created in the <Navbar/>
at the index.tsx
hahahaha
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.