我开始使用 Next.js 13 开发网站。当我尝试访问 localhost:3000:
时收到错误消息
-错误1：
错误：水合失败，因为初始 UI 与服务器上呈现的内容不匹配。
警告：期望服务器 HTML 在 .
import {cn} from '@/lib/utils'
import '@/styles/globals.css'
import {Inter} from "next/font/google"
import Navbar from '@/components/ui/Navbar'
export const metadata = {
title: 'Breadit',
description: 'A Reddit clone built with Next.js and TypeScript.',
}
const inter = Inter({subsets: ['latin']})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang='en' className={cn('bg-white text-slate-900 antialiased light',
inter.className
)}>
<body className='min-h-screen pt-12 bg-slate-50 antialiased'>
<Navbar />
<div className='container max-w-7xl mx-auto h-full pt-12'>
{children}
</div>
</body>
</html>
)
}
import { Link } from "lucide-react";
import { Icons } from "./Icons";
import { buttonVariants } from "./Button";
const Navbar = () => {
return (
<div className="fixed top-0 inset-x-0 h-fit bg-zinc-100 border -b border-zinc-300 z-[10] py-2">
<div className="container max-w-7xl h-full mx-auto flex items-center justify-between gap-2">
{/* Logo */}
<Link href="/" className="flex items-center gap-2">
<Icons.logo className="h-8 w-8 sm:h-6 sm:w-6" />
<div className="hidden text-zinc-700 text-sm font-medium md:block">Breadit</div>
</Link>
suppressHydrationWarning={true}
{/* Search */}
<Link href="/sign-in" className={buttonVariants()}>Sign In</Link>
</div>
</div>
)
}
export default Navbar
这是我的 Icons.tsx：
import { LucideProps } from "lucide-react";
export const Icons = {
logo: (props:LucideProps) => (
<svg {...props} viewBox='0 0 497 497'>
<g>
<path
d='m392 30c-71.75 0-71.75-30-143.5-30l128.5 497h30c33.137 0 60-26.863 60-60v-228.526c18.555-18.938 30-44.867 30-73.474 0-57.99-47.01-105-105-105z'
fill='#c87044'
/>
<path
d='m437 437-45-377c-41.895 0-63.904-18.405-83.322-34.644-16.942-14.167-30.323-25.356-60.178-25.356-71.75 0-71.75 30-143.5 30-57.99 0-105 47.01-105 105 0 28.607 11.445 54.537 30 73.474v228.526c0 33.137 26.863 60 60 60h287c33.137 0 60-26.863 60-60z'
fill='#db905a'
/>
<path
d='m392 60-15 407h30c16.542 0 30-13.458 30-30v-228.526c0-7.851 3.077-15.388 8.571-20.996 13.819-14.103 21.429-32.74 21.429-52.478 0-41.355-33.645-75-75-75z'
fill='#ffd185'
/>
<path
d='m407 437v-228.526c0-15.796 6.088-30.708 17.143-41.991 8.291-8.462 12.857-19.643 12.857-31.483 0-41.355-20.187-75-45-75-41.895 0-63.904-9.203-83.322-17.322-16.942-7.083-30.323-12.678-60.178-12.678-29.856 0-43.236 5.595-60.177 12.678-19.419 8.119-41.429 17.322-83.323 17.322-41.355 0-75 33.645-75 75 0 19.738 7.61 38.375 21.429 52.479 5.494 5.607 8.571 13.145 8.571 20.995v228.526c0 16.542 13.458 30 30 30h287c16.542 0 30-13.458 30-30z'
fill='#ffe8c2'
/>
<g fill='#ffd185'>
<circle cx='392' cy='135' r='7.5' />
<circle cx='362' cy='165' r='7.5' />
<circle cx='105' cy='377' r='7.5' />
<circle cx='135' cy='407' r='7.5' />
<circle cx='105' cy='135' r='7.5' />
</g>
</g>
</svg>
)
}
尝试使用
import Link from "next/link";尝试使用
import Link from "next/link";