notion API + NEXT.js + netlify でブログ立ち上げ ⑥ SEO関連の設定

2022年3月28日

Next.js で動的にXMLサイトマップ（sitemap.xml）を生成する方法まとめ

Next.js で動的にXMLサイトマップ（sitemap.xml）を生成する方法メモ。技術選定 next-sitemap と nextjs-sitemap-generator のどっちか npmの

yarn build && yarn postbuild

$ yarn postbuild
yarn run v1.22.17
warning ../../../../package.json: No license field
$ next-sitemap
Loaded env from /Users/xxx/yyy/.env
✅ [next-sitemap] Generated index sitemap and 1 sitemap(s)
○ https://blog.from-garage.com/sitemap.xml (index)
○ https://blog.from-garage.com/sitemap-0.xml
✨  Done in 0.48s.

rssについて

下記サイトを参考に実装

Next.js に feed を導入して RSS と Atom のフィードを生成しよう | fwywd（フュード）powered by キカガク

ブログを購読していただくために便利な RSS と Atom のフィード情報を生成する方法を紹介します。Next.js 向けにカスタマイズされたパッケージは現状で見つからないため、Node.js 向けのパッケージである feed を今回は利用します。

fwywd.com

したんだけど... buildした後確認したら500エラーになる
内容確認したらどうやらbuild前後でメソッドが存在しなくなっているよう
調べると下記issueがあった

show "res.writeHead is not a function" after next build · Issue #837 · i18next/next-i18next

Describe the bug show "res.writeHead is not a function" after next build next version:9.5.3 next-i18next:6.0.2 mac os _app.tsx MyApp.getInitialProps = async (appContext) => { return { ...(await APP...

github.com

今のnextjsでも治ってないかも

こちらを参考にcontext.resのプロパティを確認した

const getMethods = (obj) => {
    let properties = new Set()
    let currentObj = obj
    do {
      Object.getOwnPropertyNames(currentObj).map(item => properties.add(item))
    } while ((currentObj = Object.getPrototypeOf(currentObj)))
    return properties
  }
  console.log(getMethods(context.res))

結果
yarn dev時

Set(101) {
  'domain',
  '_events',
  '_eventsCount',
  '_maxListeners',
  'outputData',
  'outputSize',
  'writable',
  'destroyed',
  '_last',
  'chunkedEncoding',
  'shouldKeepAlive',
  'maxRequestsOnConnectionReached',
  '_defaultKeepAlive',
  'useChunkedEncodingByDefault',
  'sendDate',
  '_removedConnection',
  '_removedContLen',
  '_removedTE',
  '_contentLength',
  '_hasBody',
  '_trailer',
  'finished',
  '_headerSent',
  '_closed',
  'socket',
  '_header',
  '_keepAliveTimeout',
  '_onPendingData',
  'req',
  '_sent100',
  '_expect_continue',
  'statusCode',
  'constructor',
  '_finish',
  'statusMessage',
  'assignSocket',
  'detachSocket',
  'writeContinue',
  'writeProcessing',
  '_implicitHeader',
  'writeHead',
  'writeHeader',
  'writableFinished',
  'writableObjectMode',
  'writableLength',
  'writableHighWaterMark',
  'writableCorked',
  '_headers',
  'connection',
  '_headerNames',
  '_renderHeaders',
  'cork',
  'uncork',
  'setTimeout',
  'destroy',
  '_send',
  '_writeRaw',
  '_storeHeader',
  'setHeader',
  'getHeader',
  'getHeaderNames',
  'getRawHeaderNames',
  'getHeaders',
  'hasHeader',
  'removeHeader',
  'headersSent',
  'writableEnded',
  'writableNeedDrain',
  'write',
  'addTrailers',
  'end',
  '_flush',
  '_flushOutput',
  'flushHeaders',
  'pipe',
  'setMaxListeners',
  'getMaxListeners',
  'emit',
  'addListener',
  'on',
  'prependListener',
  'once',
  'prependOnceListener',
  'removeListener',
  'off',
  'removeAllListeners',
  'listeners',
  'rawListeners',
  'listenerCount',
  'eventNames',
  '__defineGetter__',
  '__defineSetter__',
  'hasOwnProperty',
  '__lookupGetter__',
  '__lookupSetter__',
  'isPrototypeOf',
  'propertyIsEnumerable',
  'toString',
  'valueOf',
  '__proto__',
  'toLocaleString'
}

yarn build && yarn start 時

Set(27) {
  'destination',
  '_res',
  'textBody',
  'constructor',
  'originalResponse',
  'sent',
  'statusCode',
  'statusMessage',
  'setHeader',
  'getHeaderValues',
  'hasHeader',
  'getHeader',
  'appendHeader',
  'body',
  'send',
  'redirect',
  '__defineGetter__',
  '__defineSetter__',
  'hasOwnProperty',
  '__lookupGetter__',
  '__lookupSetter__',
  'isPrototypeOf',
  'propertyIsEnumerable',
  'toString',
  'valueOf',
  '__proto__',
  'toLocaleString'
}

buildする前まであったメソッドwriteとかendがない...
代わりになりそうなbodyとかsendはtypescript時点ではないので、作れないね...

nextjsを10.0.0に下げると治ったという報告も先のissueにはあったけど、あまり下げたくないし
とりあえずgetStaticPropsで静的に生成するようにして、ブログ自体を定期的にビルドするようにしよう（だったら他のページも静的でいいのでは...要検討）

外部から取得できるようにする

rss用のページを用意しても、外部からどのurlがrss用なのか検知させられないと使用してもらえない。
調べると、linkタグにrss用のurlを記載することで認識してもらえるようになるとのこと。

next-seoを使う想定なので、next-seo.config.jsで下記内容を追加

export default {
	...,
+	additionalLinkTags: [
+	    {
+	      rel: 'alternate',
+	      type: 'application/rss+xml',
+	      title: "RSS2.0",
+	      href: 'https://blog.from-garage.com/rss/feed.xml',
+	    },
+	    {
+	      rel: 'alternate',
+	      type: 'application/atom+xml',
+	      title: "Atom",
+	      href: 'https://blog.from-garage.com/rss/atom.xml',
+	    },
+	  ],
	...
}

netlifyにpushして、preview状態でも良いので下記ツールサイトで確認

berss.com

うまく行った