当我创建NextJS项目（我还在练习）。它总是问我关于5件事，这是
Typescript-No/Yes ESLint-No/Yes src/directory-No/Yes app/directory（我忘记了，只是在创建时想象一下）-No/Yes导入"@/"-No/Yes
我总是输入Yes-Yes-No-No-Yes，因为我知道typescript和ESLint，但我不知道CSS的路径是如何工作的。
文件夹创建如下所示
- 页数
- 公共部门
- 样式
基本上我有pages/_app.tsx
import 'bootstrap/dist/css/bootstrap.min.css'
import '@/styles/globals.css'在我的风格中我有两个css，分别是navbar. module. css和global. module. css
但问题是，我可以像命名模块CSS一样，把它传递给className吗？
这是我的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;
}在pages/navbar.tsx的部分，我传递了我的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在我的网页/index.tsx中也有这样的代码
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>
</>
)
}我总是得到这个东西。错误在网站前面。
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我错过什么了吗？
1条答案
按热度按时间gblwokeq1#
Nvm错误来自
<body></body>，该错误是在index.tsx上的<Navbar/>中创建的，哈哈哈哈