Next.js

Updated: 2021-11-19

Next.js + MDX

const withMDX = require("@next/mdx")({
  extension: /\.(md|mdx)$/,
});

module.exports = withMDX({
  // Pick up MDX files in the /pages/ directory
  pageExtensions: ["js", "jsx", "md", "mdx"],
});

Google Analytics

Add this to any of the <Head>:

<Head>
  <script
    async
    src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"
  ></script>
  <script
    dangerouslySetInnerHTML={{
      __html: `
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-XXXXXXXX-X');
      `,
    }}
  />
</Head>

Sitemap

Use nextjs-sitemap-generator package.

Troubleshooting

Module not found: Can't resolve 'fs'

import fs from 'fs'; casuing the error Module not found: Can't resolve 'fs'

Solution:

In next.config.js add this section:

module.exports = withXXX({
  webpack(config) {
    config.node = { fs: "empty" };
    return config;
  },
});