onwidget / tailnext Goto Github PK
View Code? Open in Web Editor NEW⭕️ TailNext: Free template using Next.js 14 app router and Tailwind CSS.
Home Page: https://tailnext.vercel.app/
License: MIT License
⭕️ TailNext: Free template using Next.js 14 app router and Tailwind CSS.
Home Page: https://tailnext.vercel.app/
License: MIT License
I am encountering a persistent hydration warning in my Next.js application that uses Tailwind CSS for styling. The error persists even after removing dynamic class names, suggesting a deeper inconsistency in the server-client rendering process. This issue occurs across all major browsers (Chrome, Edge, Firefox) and also persists with a fresh fork of the TailNext repository.
app-index.js:33 Warning: Prop `className` did not match. Server: "motion-safe:scroll-smooth 2xl:text-[24px] __variable_aaf875 font-sans dark" Client: "motion-safe:scroll-smooth 2xl:text-[24px] __variable_aaf875 font-sans"
at html
at RootLayout (Server)
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9)
at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:11)
at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11)
at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:577:13)
at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27)
at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)
Clone the repo and install dependencies.
Run the application in development mode using npm run dev.
Open the application in a browser to see the error in the console as the page loads.
The application should hydrate without any warnings, with the server-rendered markup matching the client-rendered markup exactly.
The application logs a warning about extra attributes (class, style) that are not expected during the hydration process, indicating a discrepancy between the server and client output.
I have tried removing all dynamic class and style attributes from the tag.
Ensured that the dynamic class names are consistent between server and client renders.
Checked for any third-party scripts that might alter the DOM before hydration.
Updated all related dependencies to their latest versions.
Next.js version: 14.2.2
return (
<html lang="en" className={`motion-safe:scroll-smooth 2xl:text-[24px] ${customFont.variable} font-sans`}>
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body className="tracking-tight antialiased text-gray-900 dark:text-slate-300">
<Providers>
<Header />
<Suspense fallback={<Loading />}>
<main>{children}</main>
</Suspense>
<Footer />
</Providers>
</body>
</html>
);
<html lang="en" className={motion-safe:scroll-smooth 2xl:text-[24px] ${customFont.variable} font-sans
}>
Next.js, hydration error, SSR, Tailwind CSS, bug
I can't find the component inside the about page. Where is it?
Also love the work you've done with it. It's amazing!
When you visit the website's features section, half of the features have relevant text while the other half has just random lorem ipsum. It should be kept uniform and adding relevant text for all the features seems like a fair solution to it.
Hi!
I've been exploring on integrating NextJS 13 (with new app dir) with TailwindCSS and I've found out your example. It does look great!
I've noticed some strange DarkMode toggle behaviour - if it's your first visit on the page (you can reproduce it by visiting your demo in incognito mode) then first click on the button does not change the theme. It changes the icon, but no the theme itself.
I was wondering if it might be connected with the prerendering NextJS does to Client Side components, so the "theme" state taken from next-themes is affected by this, but I'm not sure.
Worth noting - I'm on macOS 13.1, system preferences are set to Dark by default and I've been testing with newest Chrome and Firefox browsers.
Hi how i can set font size? i need to change main menu font size plus the font itself. how i do that?
Version: "next": "^13.4.1",
Error:
SyntaxError: Unexpected token '??='
at wrapSafe (internal/modules/cjs/loader.js:1029:16)
at Module._compile (internal/modules/cjs/loader.js:1078:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1143:10)
at Module.load (internal/modules/cjs/loader.js:979:32)
at Function.Module._load (internal/modules/cjs/loader.js:819:12)
at Module.require (internal/modules/cjs/loader.js:1003:19)
at require (internal/modules/cjs/helpers.js:107:18)
at Object.<anonymous> (/home/z/per/tailnext/node_modules/next/dist/telemetry/post-payload.js:17:20)
at Module._compile (internal/modules/cjs/loader.js:1114:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1143:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @onwidget/[email protected] dev: 'next dev'
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @onwidget/[email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/z/.npm/_logs/2023-05-17T03_06_46_659Z-debug.log
Steps to reproduce:
Maybe it is because of the version of nextjs is incompatible, I am not sure.
OS: Ubuntu 20.04
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.