Skip to content

nextjs-pages-router.md

Latest commit

 

History

History
45 lines (38 loc) · 906 Bytes

nextjs-pages-router.md

File metadata and controls

45 lines (38 loc) · 906 Bytes

Next.js (Pages Router)

Step 1: Add CDN to pages/_document.tsx

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html>
      <Head>
        <link 
          rel="stylesheet" 
          href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css" 
        />
      </Head>
      <body>
        <Main />
        <NextScript />
        <script src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js"></script>
      </body>
    </Html>
  );
}

Step 2: In your component:

import { useEffect } from 'react';

export default function Header() {
  useEffect(() => {
    new window.SocialShareButton({
      container: '#share-button'
    });
  }, []);

  return (
    <header>
      <div id="share-button"></div>
    </header>
  );
}