Hi, I’m Dung Huynh Duc . Nice to meet you.

About Me

With over a decade of experience under my belt as a full-stack developer, I've had the opportunity to spearhead project teams at tech startups in Vietnam, Thailand, Japan and Singapore. Additionally, I have worked as a freelance engineer for various companies based in Asia Pacific, Europe, and North America.

Presently, I serve the role of a Senior Full Stack Software Engineer at ACX. I am consistently committed to exploring and acquiring knowledge on emerging and popular technologies.


How to use custom element with NextJS/React

blog_hero_How to use custom element with NextJS/React

Hi there,

There is a feature that I have just implemented on my blog. That's embedded Youtube player on homepage. I guess you don't want to embed heavy JS/CSS from Youtube to your website. Lucky us, there is a pretty good library that will resolve this one https://github.com/paulirish/lite-youtube-embed

Create Youtube component

As JSX won't understand the custom element so I will use @ts-expect-error as a workaround. If you have any better solution, please let me know :)

import 'lite-youtube-embed/src/lite-yt-embed.css'
import 'lite-youtube-embed/src/lite-yt-embed.js'

const YoutubeVideo = ({
}: {
  videoId: string
  title: string
}) => (
  // @ts-expect-error Property  does not exist on type 'JSX.IntrinsicElements'
  <lite-youtube videoid={videoId}>
    <button type="button" className="lty-playbtn">
      <span className="lyt-visually-hidden">{title}</span>
    {/* @ts-expect-error Property  does not exist on type 'JSX.IntrinsicElements' */}

export default YoutubeVideo


I will use dynamic import to load the component on demand and turn off SSR.

import dynamic from 'next/dynamic'

const YoutubeVideo = dynamic(() => import('./YoutubeVideo'), {
  loading: () => <div>Loading...</div>,
  ssr: false,

// ...


That's it. Hopefully, you will find this helpful. Cheer.