Next.js 13 appDir support #152
Comments
transitive-bullshit
changed the title
|
Can't speak to all the issues brought up, but the hydration errors occur because of the way that next/react streams the html. If you replace the |
|
#145 was working with an earlier build of Next.js, but it definitely looks like using |
|
That pr should be updated to work with Next.js I'd like to provide some more context on why the current approach uses cookies. Unfortunately, trying to get this working in the app directory without ensuring that the server is rendering the same
|
|
Appreciate the in-depth breakdown @WITS. I just tried This could be a problem with my app, of course, but the hydration errors during |
|
Would you be able to share your updated |
|
Definitely not a minimal repro, but my source is here: https://github.com/transitive-bullshit/next-movie/blob/main/app/layout.tsx. See RootLayoutProviders. I currently have my usage of |
|
Ah, I should have clarified when I explained the approach above that it requires a new component. Can you try wrapping the (There's a section in the updated README with an example.) |
|
Ahhh good catch. Okay, so after doing that and re-enabling my usage of DevDuring
ProdIt works well hydration-wise 💯 I haven't been able to reproduce any hydration errors when deployed as a preview build to Vercel: https://next-movie-hrwhglaz6-saasify.vercel.app/ However, I'm now seeing different, consistent 500 errors from Vercel using this branch with
Example: https://next-movie-hrwhglaz6-saasify.vercel.app/titles/424 @WITS I'm going to hold off on re-enabling dark mode toggle in prod for now. I'm not too worried about the I think this cache-control issue invariant issue is likely a bug with |
|
I created a few Next.js issues to track the errors I'm running into. Not sure what else I can do to help. |
|
|
|
|
@WITS Hi, I am using the const RootLayout = ({ children }: IProps) => {
return (
<ServerThemeProvider>
<html lang="en">
<head />
<Providers>
<body className="bg-red-500 dark:bg-blue-500">{children}</body>
</Providers>
</html>
</ServerThemeProvider>
);
};After adding |
|
I published a new version of @transitive-bullshit Good catch! The @willin Is your project using @dawidseipold Are you using the same properties on your |
|
@WITS Yep! The hydration error is doubled if I do that. Having only |
|
Okay, just published |
nope, RootLayout: <ServerThemeProvider attribute='class' themes={themes.map((x) => x.id)}>
<html lang={locale}>
<head />
<body>
<div
id='background'
className={clsx({
dark: true //darkThemes.map((x) => x.toLowerCase()).includes(theme)
})}></div>
{/* <Header /> */}
<div className='pt-20' style={{ minHeight: 'calc(100vh - 75px)' }}>
{children}
</div>
<Bootstrap />
</body>
</html>
</ServerThemeProvider>Component:
current theme none, set theme not work. |
|
if a nest a
|
|
is there a working example using |
|
Hey @WITS, I can get the page to render using both
|
|
@willin same problem when I nest. It also shows in the console that the classes on |
|
Hey @WITS, I haven't managed to get your 0.2.14 to properly function (with the
I'd also like to get your thoughts on the cookie-based approach you elaborated above would play out with edge caching. If the page is requested once by a user with a "dark" cookie, we will likely get a flash of wrong theme if another requests the same cached page with a different cookie correct? Using localStorage was a way around that issue, but I guess Server Components might not leave us much of a choice. I don't think there's a way to use the |
|
My theme is undefined , this is my layout.tsx this is my Providers.tsx i also changed the tailwind.config.js to this ( added darkMode:'class') I tried to find a solution for this but couldn't found one. If anyone had same problem please let me know . |
|
Still facing this issue. Please take a look at this code https://stackblitz.com/edit/vercel-next-js-ftrjoa. Missing something here? |
|
This is how i made it work (hoping for a better solution but does the job for now) :
|
|
@anjanah07, why did you add the useEffect? In my case, it works without it, and if I wait for the component to render, I get a flash of light mode. Could you elaborate on your solution? |
|
still happening on next 13.4.1 |
|
✅SOLUTIONS: This is how I am using this right now: Providers.tsx layout.tsx |
|
@tfsomrat This is not a solution, it only turns off the warning but the bug still remains. |
Exactly, I think there should be a way to really fix this |
|
So far what solution is being used for NextJs 13 app dir? I have read through the issues and there are a few solutions and propositions to fix this problem, but which is the best one so far which also enables SSR or SSG? |
|
What I do to resolve this whole issue: Set cookie in middleware. middleware.ts Getting the theme even in server side components. actions.client.ts Theme switcher using the experimental server actions. actions.server.ts This way I don't even have to resolve the hydration issue for next-images using "empty" images, until the client can resolve the theme. I just wrap next-images into a component: ThemeImage.tsx For my project it is enough to set the class of the html tag in the root layout based on the cookies value. layout.tsx |
Hey @vannyle , any updates about this! |
|
Hi, unfortunately, there is no update since. |
It works, but as a side effect, it causes a fetch each time you toggle themes. It also does not support system themes, which I'm not entirely sure how it could. |
|
I see there's still a lot of discussion here about how to best support
I recognize that |
|
Feel free to check out my article on how I made Tailwind theming work with the Next 13 app DIr. |
@michaelangelo-io while this will work, it's important to note that using From the Next.js Docs (source):
|
Good callout. Updated to note your comment and also an interesting solution for the static side of things: https://michaelangelo.io/blog/darkmode-rsc#important-nextjs-caveat |
|
Why is this still open? |
|
Still meet this issue. Even if wait until the page is mounted. next: 14.0.4 |
|
Hi!
there are some points that some of you missed in your code:
look at my codes: import 'public/styles/globals.css'
// notice that how I am loading my Provider conponent:
import dynamic from 'next/dynamic'
const Providers = dynamic(() => import('./providers'), { ssr: false })
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html >
<body >
<Providers>{children}</Providers>
</body>
</html>
)
}notice the ssr:false and lazy load with dynamic 'use client'
import { ThemeProvider } from '@/components/shadcn/theme-provider'
export default function Providers({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider
attribute='class'
defaultTheme='light'
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
)
}it works fine in nextjs 14 hope it will help you <3 |
This worked for me in Next.js 14, but for some reason I had to remove |
|
I forgot to say that I still have to use |
When you are on a slow network, the page will wait for a long time for the server response before switching themes. |
and others
Opening an issue to track support for Next.js 13's
appDirand server components.Currently, it's possible to use
next-themeswithinappDirwith the following pattern:This works for the most part, including accessing and changing the theme via
useTheme.However, during
next dev, we get the following console error hinting at hydration problems:And during production (hosted on Vercel), the following hydration errors seem to randomly appear regardless of how much I pair down the example so long as I'm using
next-themesin this way:#145 looks to be a cookies-based approach to solving this issue, but the PR looks stalled and I'm not sure if it's a working solution or even the best approach. So I wanted to open up an issue here to track suggestions & progress.
Thanks!
The text was updated successfully, but these errors were encountered: