Next.Js Forms: All The Resources You Need To Build Amazing And Secure Forms

NextJs SEO Checklist: The Ultimate Roadmap To A Fast, SEO-ready Website

Next Js Dynamic Import: The Definitive Guide on How to Use It for Better App Performance


<p>Dear Next.Js Aficionado,</p>



<p>Recently I&#8217;ve been working hard to prepare my humble startup for a ProductHunt launch.</p>



<p>So the other day, I decided that the homepage needs a couple of videos that show the app in action. I don&#8217;t have a budget for fancy stuff, so I made three screencasts, synced them with cool music, and uploaded them on YouTube.</p>



<p>Later, I embedded the videos on the page.</p>



<p>Obviously, some old lessons I had learned years ago were forgotten.</p>



<p>The next day I was preparing another screencast when I was surprised by this &#8220;nice view&#8221;:</p>


<picture><source media="(min-width: 1536px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/07/buhalbu-bad-scores.jpg" /><source media="(min-width: 1366px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/07/buhalbu-bad-scores.jpg" /><source media="(min-width: 1024px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/07/buhalbu-bad-scores-1366x732.jpg" /><source media="(min-width: 768px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/07/buhalbu-bad-scores-1024x549.jpg" /><source media="(min-width: 428px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/07/buhalbu-bad-scores-768x411.jpg" /><source media="(min-width: 150px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/07/buhalbu-bad-scores-428x229.jpg" /><source media="(min-width: 0px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/07/buhalbu-bad-scores-150x80.jpg" /><img loading="lazy" decoding="async" data-content-image="true" src="https://storm3.buhalbu.com/wp-content/uploads/2022/07/buhalbu-bad-scores-1024x549.jpg" width="1024" height="549" class="img-fluid" alt="" /></picture>


<p>I was stunned…</p>



<p>It was not how I left the page. The last time I checked, everything besides PWA was colored in green.</p>



<p>So I started debugging, and right away, I noticed the cause for those bad scores was the embedded YouTube videos.</p>



<h2 class="wp-block-heading">What an embarrassment!</h2>



<p>I was claiming I knew something about Technical SEO and how to achieve better website performance, and I failed to foresee the awful impact those videos would have on my webpage.</p>



<p>Anyway…</p>



<p>After some research (a.k.a googling) and some creative pondering, I&#8217;ve come up with the following react component:</p>




<div class="bu-code"><pre class="language-javascript"><code>import {useRef} from &#039;react&#039;;

export type Props = {
    video: string;
    width: string,
    height: string,
    thumbnailQuality: &#039;default&#039; | &#039;hqdefault&#039; | &#039;mqdefault&#039; | &#039;sddefault&#039;
}

export default function YouTubeFrame({video, width, height, thumbnailQuality}: Props) {
    const divRef = useRef&lt;HTMLDivElement|null&gt;(null);

    const onClick = () =&gt; {
        const iframe = document.createElement( &quot;iframe&quot; );
        iframe.setAttribute( &quot;frameborder&quot;, &quot;0&quot; );
        iframe.setAttribute( &quot;allowfullscreen&quot;, &quot;1&quot;);
        iframe.setAttribute(&#039;allow&#039;, &#039;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture&#039;);
        iframe.style.width = width;
        iframe.style.height = height;
        iframe.setAttribute( &quot;src&quot;, `https://www.youtube.com/embed/${video}?rel=0&amp;showinfo=1&amp;autoplay=1` );
        if (divRef.current) {
            divRef.current.innerHTML = &quot;&quot;;
            divRef.current.appendChild(iframe);
        }
    }


    return (
        &lt;div ref={divRef} className=&quot;youtube-frame position-relative&quot;&gt;
            &lt;span onClick={onClick} className=&quot;ti-control-play position-absolute display-1 text-white&quot; /&gt;
            &lt;img onClick={onClick} loading=&quot;lazy&quot; src={`https://img.youtube.com/vi/${video}/${thumbnailQuality}.jpg`} alt=&quot;YouTube Video Thumbnail&quot; width={width} height={height} className=&quot;shadow&quot; /&gt;
        &lt;/div&gt;
    );
}</code></pre></div>



<p>How do I embed a YouTube video in NextJS? </p>



<p>As you can see, the component accepts the video slug, the preferred thumbnail size, and the desired dimensions as parameters. Instead of embedding the video right away, I&#8217;m putting a placeholder (its thumbnail), so the video&#8217;s iframe is appended only after a click on that placeholder.</p>



<p>It&#8217;s nothing genius, but it did restore the balance in the universe…</p>


<picture><source media="(min-width: 1536px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/07/buhalbu-better-scores.jpg" /><source media="(min-width: 1366px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/07/buhalbu-better-scores.jpg" /><source media="(min-width: 1024px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/07/buhalbu-better-scores-1366x671.jpg" /><source media="(min-width: 768px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/07/buhalbu-better-scores-1024x503.jpg" /><source media="(min-width: 428px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/07/buhalbu-better-scores-768x377.jpg" /><source media="(min-width: 150px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/07/buhalbu-better-scores-428x210.jpg" /><source media="(min-width: 0px)" srcSet="https://storm3.buhalbu.com/wp-content/uploads/2022/07/buhalbu-better-scores-150x74.jpg" /><img loading="lazy" decoding="async" data-content-image="true" src="https://storm3.buhalbu.com/wp-content/uploads/2022/07/buhalbu-better-scores-1024x503.jpg" width="1024" height="503" class="img-fluid" alt="" /></picture>


<p>This case study is evidence that Next.Js is an &#8220;SEO-friendly&#8221; framework but not &#8220;SEO-ready.&#8221;</p>



<p>We, as web developers, have plenty of room to screw things, so we must be careful. We must measure the performance of our website every time we&#8217;re about to make substantial changes. And we must measure it after the changes.</p>



<p>This additional monitoring is the only way to know the real impact of our work.</p>



<p>Be Happy,<br>Sashe Vuchkov </p>




<section
    class="bu-section   bu-related-posts"
    style=""
>
    
    


<div class="container bu-heading">
    <div class="row">
        <div class="col-12 tag-h2 d-flex justify-content-between align-items-center">
            <div>
                                <h2>Related Articles</h2>            </div>
                    </div>
    </div>
</div>




<div class="featured-snippets-columns ">
            <div class="row gx-2">
            
        
            <div class="col-12 col-md-6">
                
<div class="card featured-snippet">
                        <img decoding="async"
                    src="https://storm3.buhalbu.com/wp-content/uploads/2023/01/react-reusable-components-428x285.jpg"
                    class="card-img" alt="A Handy Way of Building Reusable React Components (Inspired by..."
                    loading="lazy"
                    data-preload="false"
                    data-sizes='{"medium":"https:\/\/storm3.buhalbu.com\/wp-content\/uploads\/2023\/01\/react-reusable-components-428x285.jpg","medium_large":"https:\/\/storm3.buhalbu.com\/wp-content\/uploads\/2023\/01\/react-reusable-components-768x511.jpg"}'
            />
            
    <div class="card-body">
                <h3 class="card-title">
            <a
                data-internal-link="true" href="https://buhalbu.com/javascript/issues/react-reusable-components"
                rel=""
            >
                A Handy Way of Building Reusable React Components (Inspired by&#8230;            </a>
        </h3>
        
                    <div class="card-text excerpt">
                What can we learn about coding and creating reusable components with react from some of the best novelists? Click to&#8230;            </div>
        
            </div>
</div>            </div>
    
        
            <div class="col-12 col-md-6">
                
<div class="card featured-snippet">
                        <img decoding="async"
                    src="https://storm3.buhalbu.com/wp-content/uploads/2022/11/nextjs-building-forms-428x242.webp"
                    class="card-img" alt="Next.Js Forms: All The Resources You Need To Build Amazing..."
                    loading="lazy"
                    data-preload="false"
                    data-sizes='{"medium":"https:\/\/storm3.buhalbu.com\/wp-content\/uploads\/2022\/11\/nextjs-building-forms-428x242.webp","medium_large":"https:\/\/storm3.buhalbu.com\/wp-content\/uploads\/2022\/11\/nextjs-building-forms-768x434.webp"}'
            />
            
    <div class="card-body">
                <h3 class="card-title">
            <a
                data-internal-link="true" href="https://buhalbu.com/nextjs/articles/next-js-forms"
                rel=""
            >
                Next.Js Forms: All The Resources You Need To Build Amazing&#8230;            </a>
        </h3>
        
                    <div class="card-text excerpt">
                Check out these 17 resources that will help you achieve excellent results in building Next.js forms.            </div>
        
            </div>
</div>            </div>
    
        
            <div class="col-12 col-md-6">
                
<div class="card featured-snippet">
                        <img decoding="async"
                    src="https://storm3.buhalbu.com/wp-content/uploads/2022/09/nextjs-seo-428x285.webp"
                    class="card-img" alt="NextJs SEO Checklist: The Ultimate Roadmap To A Fast, SEO-ready..."
                    loading="lazy"
                    data-preload="false"
                    data-sizes='{"medium":"https:\/\/storm3.buhalbu.com\/wp-content\/uploads\/2022\/09\/nextjs-seo-428x285.webp","medium_large":"https:\/\/storm3.buhalbu.com\/wp-content\/uploads\/2022\/09\/nextjs-seo-768x512.webp"}'
            />
            
    <div class="card-body">
                <h3 class="card-title">
            <a
                data-internal-link="true" href="https://buhalbu.com/nextjs/articles/nextjs-seo-checklist"
                rel=""
            >
                NextJs SEO Checklist: The Ultimate Roadmap To A Fast, SEO-ready&#8230;            </a>
        </h3>
        
                    <div class="card-text excerpt">
                Build a fast and well-optimized website that makes you feel proud, and that shows to the world your high level&#8230;            </div>
        
            </div>
</div>            </div>
    
        
            <div class="col-12 col-md-6">
                
<div class="card featured-snippet">
                        <img decoding="async"
                    src="https://storm3.buhalbu.com/wp-content/uploads/2021/08/next-js-dynamic-import-428x285.webp"
                    class="card-img" alt="Next Js Dynamic Import: The Definitive Guide on How to..."
                    loading="lazy"
                    data-preload="false"
                    data-sizes='{"medium":"https:\/\/storm3.buhalbu.com\/wp-content\/uploads\/2021\/08\/next-js-dynamic-import-428x285.webp","medium_large":"https:\/\/storm3.buhalbu.com\/wp-content\/uploads\/2021\/08\/next-js-dynamic-import-768x512.webp"}'
            />
            
    <div class="card-body">
                <h3 class="card-title">
            <a
                data-internal-link="true" href="https://buhalbu.com/nextjs/articles/nextjs-dynamic-import"
                rel=""
            >
                Next Js Dynamic Import: The Definitive Guide on How to&#8230;            </a>
        </h3>
        
                    <div class="card-text excerpt">
                The popular framework offers two ways to import libraries and react components dynamically, which can improve the performance of our&#8230;            </div>
        
            </div>
</div>            </div>
    
        
            <div class="col-12 col-md-6">
                
<div class="card featured-snippet">
                        <img decoding="async"
                    src="https://storm3.buhalbu.com/wp-content/uploads/2021/07/devinception-nextjs-templates-fi-428x282.jpg"
                    class="card-img" alt="DevInception &#8211; Free Blog Template For Web Developers (Next.Js)"
                    loading="lazy"
                    data-preload="false"
                    data-sizes='{"medium":"https:\/\/storm3.buhalbu.com\/wp-content\/uploads\/2021\/07\/devinception-nextjs-templates-fi-428x282.jpg","medium_large":"https:\/\/storm3.buhalbu.com\/wp-content\/uploads\/2021\/07\/devinception-nextjs-templates-fi-768x506.jpg"}'
            />
            
    <div class="card-body">
                <h3 class="card-title">
            <a
                data-internal-link="true" href="https://buhalbu.com/stream/next-js-free-blog-template"
                rel=""
            >
                DevInception &#8211; Free Blog Template For Web Developers (Next.Js)            </a>
        </h3>
        
                    <div class="card-text excerpt">
                If you&#8217;re a web developer who&#8217;s searching the web for a stylish blog template, then there&#8217;s a big chance that&#8230;            </div>
        
            </div>
</div>            </div>
    
        
            <div class="col-12 col-md-6">
                
<div class="card featured-snippet">
                        <img decoding="async"
                    src="https://storm3.buhalbu.com/wp-content/uploads/2021/07/devinception-next-js-blog-template-428x298.webp"
                    class="card-img" alt="A Curated List of Next Js Templates for Personal Websites..."
                    loading="lazy"
                    data-preload="false"
                    data-sizes='{"medium":"https:\/\/storm3.buhalbu.com\/wp-content\/uploads\/2021\/07\/devinception-next-js-blog-template-428x298.webp","medium_large":"https:\/\/storm3.buhalbu.com\/wp-content\/uploads\/2021\/07\/devinception-next-js-blog-template-768x535.webp"}'
            />
            
    <div class="card-body">
                <h3 class="card-title">
            <a
                data-internal-link="true" href="https://buhalbu.com/stream/next-js-templates-blogs"
                rel=""
            >
                A Curated List of Next Js Templates for Personal Websites&#8230;            </a>
        </h3>
        
                    <div class="card-text excerpt">
                Creating your blog from scratch can be challenging, but it doesn&#039;t have to be that way. Read this curated list&#8230;            </div>
        
            </div>
</div>            </div>
        </div>
    </div>

    </section>

Next.Js Adventures: How a Couple Of Embedded YouTube Videos Screwed My Performance Scores


<p>Dear Next.Js Aficionado,</p>



<p>So you wanna build a beautiful website, right?</p>



<p>A website that shows your high level of web development skills and one that helps you get the best job offers or freelance gigs, or that attracts users for your cool app.</p>



<p>Nice, we all want that!</p>



<p>But often we don&#8217;t get it because we make a common big mistake.</p>



<p>It&#8217;s so widespread that even sessional professionals fall victim to it. No matter their high achievements or their years of experience. Once they go for their own website, many times they create something ultra-functional. Something well-coded.</p>



<p>But something with&#8230; </p>



<h2 class="wp-block-heading">ZERO marketing or design value&#8230;</h2>



<p>It&#8217;s just plain ugly.</p>



<p>No offense, but we &#8211; all web developers, must learn that we&#8217;re not some extraordinary guys who can handle every possible challenge in the world.</p>



<p>We&#8217;re not superhumans!</p>



<p>Anyway.</p>



<p>The point is &#8211; we&#8217;re not web designers. We&#8217;re not UX experts either.</p>



<p>So we shall not try to be one!</p>



<p>The &#8220;super easy and profitable pro hack&#8221; is to start working with web designers or at least &#8211; use professional templates. You will see a drastic improvement in your ability to put online fast whatever projects you want that make you look BIG POTATO in the industry.</p>



<p>It&#8217;s not criminal to be a small potato, though&#8230;</p>



<p>But why be one when you have all the opportunities you need to look larger than life?</p>



<h2 class="wp-block-heading">And the best part? </h2>



<p>You can get wonderful free HTML templates right now! The internet is full of them. </p>



<p>Just pick something beautiful and turn it into a piece of Next.Js (React.Js) art.</p>



<p>Cheers,</p>



<p>Sashe Vuchkov</p>



<p>PS. I offer <a data-internal-link="true" href="https://buhalbu.com/stream/next-js-free-blog-template">a free template</a>, too. It&#8217;s nothing fancy, but I put in it all of my marketing knowledge. The knowledge that inundates me with job and partnership offers to this day. <br><br>If you&#8217;re curious about how I structure my own portfolio websites for maximum success, you can download it on Gumroad in exchange for your email. </p>



<p></p>


Super Easy &#038; Profitable &#8220;Pro Hack&#8221;  For Amazing Websites With NextJs

NextJs Tutorial: The Full-Stack Story Of Building Your Superb Portfolio Website


<p>Dear Next.Js Aficionado,</p>



<p>So you wanna build a beautiful website, right?</p>



<p>A website that shows your high level of web development skills and one that helps you get the best job offers or freelance gigs, or that attracts users for your cool app.</p>



<p>Nice, we all want that!</p>



<p>But often we don&#8217;t get it because we make a common big mistake.</p>



<p>It&#8217;s so widespread that even sessional professionals fall victim to it. No matter their high achievements or their years of experience. Once they go for their own website, many times they create something ultra-functional. Something well-coded.</p>



<p>But something with&#8230; </p>



<h2 class="wp-block-heading">ZERO marketing or design value&#8230;</h2>



<p>It&#8217;s just plain ugly.</p>



<p>No offense, but we &#8211; all web developers, must learn that we&#8217;re not some extraordinary guys who can handle every possible challenge in the world.</p>



<p>We&#8217;re not superhumans!</p>



<p>Anyway.</p>



<p>The point is &#8211; we&#8217;re not web designers. We&#8217;re not UX experts either.</p>



<p>So we shall not try to be one!</p>



<p>The &#8220;super easy and profitable pro hack&#8221; is to start working with web designers or at least &#8211; use professional templates. You will see a drastic improvement in your ability to put online fast whatever projects you want that make you look BIG POTATO in the industry.</p>



<p>It&#8217;s not criminal to be a small potato, though&#8230;</p>



<p>But why be one when you have all the opportunities you need to look larger than life?</p>



<h2 class="wp-block-heading">And the best part? </h2>



<p>You can get wonderful free HTML templates right now! The internet is full of them. </p>



<p>Just pick something beautiful and turn it into a piece of Next.Js (React.Js) art.</p>



<p>Cheers,</p>



<p>Sashe Vuchkov</p>



<p>PS. I offer <a data-internal-link="true" href="https://buhalbu.com/stream/next-js-free-blog-template">a free template</a>, too. It&#8217;s nothing fancy, but I put in it all of my marketing knowledge. The knowledge that inundates me with job and partnership offers to this day. <br><br>If you&#8217;re curious about how I structure my own portfolio websites for maximum success, you can download it on Gumroad in exchange for your email. </p>



<p></p>



<p><br></p>



<p><br>  </p>


Editor's Picks

Latest

Recent Posts