Comments (11)
@leerob thanks for the note, I must be missing it! I'll add it in.
Also, thank you for writing https://leerob.io/blog/mailchimp-next-js - it helped me implement ca3f7b7
Learn how to integrate Next.js and React with Mailchimp to build a newsletter subscription form.
from brios.
Hm this is frustrating. I'll see if I can get mxstbr to take a look.
from brios.
After reading further into the code, I see you have next-seo! Maybe it's just missing from this file?
I see it working here: https://github.com/brianlovin/brian-lovin-next/blob/7a1fd784475856eeabe0d5b48deb31e9685e05c4/src/pages/design-details/%5Bslug%5D.tsx#L24
from brios.
Super weird, the tags are being set in the <head>
- I can see them here: https://github.com/brianlovin/brian-lovin-next/blob/master/src/components/Overthought/Post/SEO.tsx
But the Sharing Debugger isn't picking them up...I wonder if it's an SSR thing.
My personal site. Contribute to brianlovin/brian-lovin-next development by creating an account on GitHub.
from brios.
I wonder if it's because you're returning null
for the first SSR here and then maybe the route is being cached?
I ran into this exact same issue with Next.js + styled-components + useDarkMode and ended up using your workaround. Let me see if the same issue is affecting me.
from brios.
I think that's it. I removed the workaround here and it deployed that commit with Now. Looks like it correctly picked up the OG tags now.
What a bummer 😢 I have an issue open on styled-components for this: styled-components/styled-components#2880
from brios.
NOOO!
I think I know of a solution though: instead of returning null
we could set a visibility:hidden
property on the body
of the page...testing.
from brios.
Okay it doesn't work, and triggers the same issue that you pointed out in styled-components/styled-components#2880
from brios.
from brios.
This is a very dumb hack, but instead of returning null
you can do:
// prevents ssr flash for mismatched dark mode
if (!mounted) {
return (
<div style={{ visibility: 'hidden' }}>
<Fathom>
<Sentry>
<SEO />
<ThemeProvider theme={theme}>
<GlobalStyles.ResetStyles />
{children}
</ThemeProvider>
</Sentry>
</Fathom>
</div>
)
}
In combination with the useEffect
and useState
to re-render on mount, this seems to be working and I can verify that at least Twitter social cards are working on a test deployment.
from brios.
Still unknown, we'll need to track this in the s-c issue above.
from brios.
Related Issues (20)
- App Icons on the App Dissection page are throwing 404 HOT 1
- TypeError: Cannot read property 'replace' of undefined HOT 1
- Bug in AMA HOT 1
- Can't subscribe to newsletter HOT 3
- error - TypeError: Cannot read property 'trim' of undefined HOT 4
- Error: Expected undefined to be a GraphQL schema. HOT 3
- Refresh error when going to a different tab and then back to your site HOT 2
- Navigation overlay stays after changing viewport HOT 1
- Failure to read any of the writings articles with Qt5 WebView (i.e. WebKit) HOT 9
- Not able to sign in on iPhone with Safari HOT 2
- Banner on blog posts has unreadable text in dark mode (Safari Mobile) HOT 1
- Users avatar not updating in AMA HOT 1
- Background color is being applied to <code> tag HOT 1
- Build error HOT 2
- Sign in link cut off on mobile HOT 2
- Please provide instructions on how to run/deploy an instance of your briOS HOT 1
- RSS link returns HTML instead of RSS HOT 2
- Possible to subscribe to writing?
- Sign in with Twitter needs a new API key
- "Speaking" section content overflow
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from brios.