Next.jsサイトにsitemapを実装する

2021/01/18

/pages/sitemap.xml.tsx

import React from 'react';
import { GetServerSideProps } from 'next';

import { SITE_URL } from '../utils/env';
import { mergeUrlAndSlug, UrlTable } from '../utils/path/url';
import { getAvailableSlugs } from '../utils/article/fs.server';

const FIXED_URLS = [UrlTable.root, UrlTable.about, UrlTable.blog];
const siteUrl = SITE_URL.slice(0, -1);

const genUrl = (url: string) => `<url><loc>${siteUrl + url}</loc></url>`;
const genFromSlugs = async (urlBase: string, urlPost: string) => {
  const slugs = await getAvailableSlugs(urlBase);
  return slugs.map((slug) => genUrl(mergeUrlAndSlug(slug, urlPost)));
};

export const getServerSideProps: GetServerSideProps = async ({ res }) => {
  const smFixed = FIXED_URLS.map((url) => genUrl(url));
  const smBlogPosts = await genFromSlugs(UrlTable.blog, UrlTable.blogPosts);

  const sitemap = [...smFixed, ...smBlogPosts].join('');

  if (res) {
    res.setHeader('Content-Type', 'text/xml');
    res.write(`<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${sitemap}
    </urlset>`);
    res.end();
  }

  return {
    props: {},
  };
};

const Sitemap: React.FC = () => null;

export default Sitemap;

sitemap も pages でレンダリングする。コツはファイル名を /pages/sitemap.xml.tsx として XML を返すことを明示することと、SSR(getServerSideProps) の res.setHeader で text/xml として返すこと。

SSG のページは、固定の URL テーブルを作成して、それを返す。
slug などの dynamic route を使っているページは、getStaticPaths で利用している関数をそのまま sitemap.xml.tsx でも利用すればよい

references

https://stackoverflow.com/questions/64936872/next-js-is-there-any-way-to-render-an-xml-file

markdownページでnext/imageを使う

2021/01/15

import React from 'react';
import Image from 'next/image';

type NextImageProps = {
  src: string;
  alt?: string;
};

export const NextImage: React.FC<NextImageProps> = ({ src, alt, ...props }) => (
  <div
    style={{
      display: 'flex',
      position: 'relative',
      justifyContent: 'center',
      alignItems: 'center',
      width: '100%',
      height: '16em',
      marginBottom: '1.75em',
      backgroundColor: '#f7fafc',
    }}
  >
    <Image {...props} src={src} alt={alt || src} layout="fill" objectFit="contain" />
  </div>
);

markdown で利用する画像サイズは予測しづらいので、next/image の layout="fill" を使い、動的にリクエストを変更してもらう。親コンテナ（のサイズ）が必要になるので、div で wrap しておき、画像自身は objectFit="contain" で枠に収まるように設定した。

import remarkUnwrapImages from 'remark-unwrap-images';

const getDefaultMdxOptions = () => ({
  // ...
  remarkPlugins: [
    // ...
    remarkUnwrapImages,
  ],
});

markdown のデフォルトだと、image をpで囲ってしまい、p -> divの HTML 違反となってしまうため、remark-unwrap-images で p を外す。next-mdx-remote の mdxOptions に remarkUnwrapImages を追加することで対応できる。

references

next/image: https://nextjs.org/docs/api-reference/next/image
layout-fill sample: https://github.com/vercel/next.js/blob/canary/examples/image-component/pages/layout-fill.js
remark-unwrap-images: https://github.com/remarkjs/remark-unwrap-images

markdownにカスタムブロックを追加する

2021/01/12

yarn add remark-custom-blocks

remark-custom-blocks を使うと、markdown にカスタムブロックを追加できる。

import remarkCustomBlocks from 'remark-custom-blocks';

const getDefaultMdxOptions = () => ({
  // ...
  remarkPlugins: [
    [
      remarkCustomBlocks,
      {
        exercise: {
          classes: 'exercise',
          title: 'required',
        },
      },
    ],
  ],
});

next-mdx-remote の mdxOptions に remarkCustomBlocks を追加し、オプションを設定する。classes でブロックにあてる CSS クラス名を、title でタイトル部分が必須かどうかを設定できる。

/* 
 * Custom Blocks
 */
.exercise,
.practice {
  border: 1px solid #e2e8f0;
  border-radius: 0.5em;
  margin-bottom: 1.75em;

  .custom-block-heading {
    padding: 0.5em 1em;
    border-radius: 0.5em 0.5em 0 0;
    font-size: 1em;
    font-weight: bold;
  }

  .custom-block-body {
    border-radius: 0 0 0.5em 0.5em;
    padding: 1em;
    font-size: 1em;

    & ol,
    & ul,
    & p {
      margin-bottom: 0;
    }
  }
}

.exercise {
  border-color: #81e6d9;

  .custom-block-heading {
    background-color: #e6fffa;
  }
}

CSS クラス名に対応するスタイルを記述する。今回はブロック全体を角丸矩形で囲い、タイトル部分に背景色を当てた。

/contents/snippet/2021-01-12-remark-custom-blocks/remark-custom-blocks.png

[[exercise | 練習問題 : 三角形の面積を求める]]
| 1. 整数を 1 つ受け取り、その値を 2 倍した値を表示してください
| 2. 整数を 2 つ受け取り、その値の積を表示してください
| 3. 小数を 2 つ受け取り、三角形の面積を求めるプログラムを記述してください
| 4. 問題(3)で、小数点以下は 1 桁で表示するようにしてください

[[name | title]] が開始部分になり、以下 | が続く限りブロックとみなす。| の内部で別の markdown 記法を使っても良い。

references

remark-custom-blocks: https://github.com/zestedesavoir/zmarkdown/tree/master/packages/remark-custom-blocks

mdxファイルのリンクにtarget=_blankなどを入れる

2021/01/03

import hydrate from 'next-mdx-remote/hydrate';

export const LinkWithTargetBlank = (props) => {
  const { href, ...rest } = props;
  if (href.startsWith('http'))
    return <a href={href} target="_blank" rel="noopener noreferrer" {...rest} />;

  return <Link to={href} {...rest} />;
};

hydrate(content, {
  components: {
    // ...
    a: LinkWithTargetBlank,
  },
});

href が外部リンクの場合は、a タグで展開し、target="_blank" や rel="noopener noreferrer" を付与する
href が内部リンクの場合は、next/link で展開する

Chakra UI の Link が使える場合は、target, ref のかわりに isExternal を付与するだけで OK。

references

noopener: https://blog.ojisan.io/noreferrer-noopener

Next.jsにGoogleAnalyticsを入れる

2021/01/02

.env.production.local

NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=YOUR_TRACKING_ID

utils/analytics/gtag.ts

export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID;

export const pageview = (url: string) => {
  window.gtag('config', GA_TRACKING_ID, {
    page_path: url,
  });
};

export const event = ({ action, category, label, value }) => {
  if (!GA_TRACKING_ID) return;

  window.gtag('event', action, {
    event_category: category,
    event_label: JSON.stringify(label),
    value: value,
  });
};

_document.tsx

import { GA_TRACKING_ID } from '../utils/analytics/gtag';

// Update <Head /> as below
<Head>
  {GA_TRACKING_ID && (
    <>
      <script
        async
        src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
      ></script>
      <script
        dangerouslySetInnerHTML={{
          __html: `
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', '${GA_TRACKING_ID}');`,
        }}
      ></script>
    </>
  )}
</Head>

_app.tsx

import React, { useEffect } from 'react';
import { useRouter } from 'next/router';

import * as gtag from '../utils/analytics/gtag';

const App: React.FC<AppProps> = ({ Component, pageProps }) => {
  const router = useRouter();
  useEffect(() => {
    if (!gtag.GA_TRACKING_ID) return;

    const handleRouteChange = (url: string) => {
      gtag.pageview(url);
    };

    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);

  // ...
}

next-env.d.ts

interface Window {
  gtag(type: 'config', googleAnalyticsId: string, { page_path: string });
  gtag(
    type: 'event',
    eventAction: string,
    fieldObject: {
      event_label: string;
      event_category: string;
      value?: string;
    },
  );
}

#nextjs タグの付いた Snippet

Next.jsサイトにsitemapを実装する

references

markdownページでnext/imageを使う

references

markdownにカスタムブロックを追加する

references

mdxファイルのリンクにtarget=_blankなどを入れる

references

Next.jsにGoogleAnalyticsを入れる

references