logo

Next.js

Last Updated: 2023-01-08

Markdown

Use MDX

If you use MDX, add this to every md or mdx page:

import Layout from 'path/to/Layout';
export default ({ children }) => <Layout>{children}</Layout>;

// Your markdown goes here

And add this to next.config.js:

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

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

No need to use dynamic routes.

Use Dyanmic Routes and Remark

To keep the markdown files "pure", keep the markdown files separately and use Dynamic Routes: create a file pages/[...slug].js.

import { remark } from 'remark';
import html from 'remark-html';
import remarkGfm from 'remark-gfm';

export async function getStaticProps({ params }) {
  // read content using fs
  const page = getContentBySlug(params.slug);
  const markdown = await remark()
    // Use Github flavor so tables and other features can be rendered correctly
    .use(remarkGfm)
    .use(html)
    .process(page.content || '');
  const content = markdown.toString();

  return {
    props: {
      ...page,
      content,
    },
  };
}

export async function getStaticPaths() {
  const pages = getAllPages();

  return {
    paths: pages.map((page) => {
      return {
        params: {
          slug: page.slug,
        },
      };
    }),
    fallback: false,
  };
}

export default function Page(params) {
  // render the content
  return (
    <Layout>
      <div dangerouslySetInnerHTML={{ __html: params.content }} />
    </Layout>
  );
}

Google Analytics

Find the MEASUREMENT ID on analytics.google.com: Admin => Data Streams => Web stream details.

Use nextjs-google-analytics

$ npm i nextjs-google-analytics

Modify _app.js

import { GoogleAnalytics } from 'nextjs-google-analytics';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <GoogleAnalytics trackPageViews gaMeasurementId="G-XXXXXXXXX" />
      <Component {...pageProps} />
    </>
  );
}

Use Script

Add this to any of the <Head>:

import Head from 'next/head';
import Script from 'next/script';

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

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

Sitemap

Use nextjs-sitemap package.

Add this to next-sitemap.config.js file:

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  generateRobotsTxt: true, // (optional)
  // ...other options
};

You may need to name the file next-sitemap.config.cjs instead if you have "type": "module" in your package.json.

Add this to package.json:

"scripts": {
  "postbuild": "next-sitemap"
}

If you named the file differently (e.g. next-sitemap.config.cjs):

"scripts": {
  "postbuild": "next-sitemap --config next-sitemap.config.cjs",
}

By default the generated sitemap is example.com/sitemap.xml

Image

Local image: no need to specify width and height since they are available at the build time.

import localImage from '/path/to/image.jpg';
import Image from 'next/image';

<Image src={localImage} />;

Remote image: need to specify width and height.

<Image src="http://example.com/image.png" width={400} height={500} />

How to use Node.js API vs Web API

Server-side only: Node.js API

To use path, fs, put them inside getStaticProps(), which is called at the build time on the server-side but not on the client-side:

import { promises as fs } from 'fs';
import path from 'path';

export async function getStaticProps(context) {
  const filepath = path.join(process.cwd(), 'path/to/file');
  const content = (await fs.readFile(filepath)).toString();
  return {
    props: {
      content: await Promise.all(content),
    },
  };
}

Client-side only: Web API

To use window or other Web APIs, use the useEffect hook, which only executes client-side:

import { useEffect } from 'react';

useEffect(() => {
  // You now have access to `window`
}, []);

Get Window Height

As mentioned above, window is available inside useEffect():

const [mapHeight, setMapHeight] = useState(0);

useEffect(() => {
  setMapHeight(window.innerHeight - 100);
}, []);

Deployment

Static

If your site is static, you can use next build && next export to export the static HTML. Generated files will be stored in the out folder. You can upload the folder to some cloud storage to serve the static site.

By default your pages will have .html suffix, like example.com/content/mypage.html, to remove the .html suffix, add trailingSlash: true to your next.config.js, then it actually generates files like /content/mypage/index.html, then it can be accessed by example.com/content/mypage.

Built-in Server

Otherwise Next.js has a built-in server. You can check Next.js's package.json, it depends on express.

Trouble Shooting

The default Firebase app already exists.

Solution: check if (!firebase.apps.length):

import firebase from 'firebase-admin';
import { initializeApp, cert } from 'firebase-admin/app';

if (!firebase.apps.length) {
  initializeApp({
    credential: cert(serviceAccount),
  });
}

Undefined router

The result of const router = useRouter(); may be undefined at the first rendering.

Solution: check router.isReady in useEffect:

const router = useRouter();
useEffect(() => {
  if (!router.isReady) return;
  // ...
}, [router.isReady]);

Lint

Install eslint-config-next:

$ npm i --save-dev eslint eslint-config-next

Add to your .eslintrc in your project folder:

{
  "extends": ["eslint:recommended", "next"]
}