-
|
I created widget from this website and tried to embed Twitter widget like this _document.tsximport React from "react";
import Document, { Head, Html, Main, NextScript } from "next/document";
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<script async src="https://platform.twitter.com/widgets.js" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;index.tsximport React from "react";
const IndexPage: React.FC = () => {
return (
<a
className="twitter-timeline"
data-height="400"
href="https://twitter.com/commitly_jp"
target="_blank"
rel="noreferrer"
>
Tweets by commitly_jp
</a>
);
};
export default IndexPage;I can embed Tweet timeline, but the following warning appears in the console Please tell me how to embed it correctly. Note: This problem only seems to occur if I start with |
Beta Was this translation helpful? Give feedback.
Replies: 6 comments 2 replies
-
|
Also i'm having a similar error when using a <video
autoPlay
loop
muted
playsInline
style={{
height: '100vh',
width: '100vw',
objectFit: 'cover',
zIndex: 0,
}}>
<source src={url} type="video/mp4" />
</video>The error says in my case How do i solve it? |
Beta Was this translation helpful? Give feedback.
-
|
I gave up embedding the script in React.useEffect(() => {
const s = document.createElement("script");
s.setAttribute("src", "https://platform.twitter.com/widgets.js");
s.setAttribute("async", "true");
document.head.appendChild(s);
}, []); |
Beta Was this translation helpful? Give feedback.
-
|
If you don't mind using external modules, react-twitter-embed is a good way. I use this module in my personal Next-based blog. Simple Tweet Embedding Example: import { TwitterTweetEmbed } from "react-twitter-embed";
<TwitterTweetEmbed
tweetId={'340640143058825216'}
/> |
Beta Was this translation helpful? Give feedback.
-
|
Wouldn't that just do everything on the client? With Next.js you could leverage the loading of the oembed code on the server which I guess you're not getting with such library. |
Beta Was this translation helpful? Give feedback.
-
it worked for me, thanks you |
Beta Was this translation helpful? Give feedback.
-
|
A side note, embedded twitter timeline just won't work on safari 🤔 maybe due to its privacy policy? |
Beta Was this translation helpful? Give feedback.
-
|
privacy policy !? |
Beta Was this translation helpful? Give feedback.
-
For Alternative Use This React TweetReact Tweet is a React component that makes it easy to embed tweets from Twitter into your web application. InstallationYou can install React Tweet using npm: npm install react-tweetExample Codeimport { Tweet } from "react-tweet";
function Twitter() {
return (
<div className="light">
<Tweet id="1723990780145184971" />
</div>
);
}
export default Twitter; |
Beta Was this translation helpful? Give feedback.
I gave up embedding the script in
_document.tsxand dynamically plugged it in as follows