Next.js で動的にXMLサイトマップ(sitemap.xml)を生成する方法メモ。 技術選定 next-sitemap と nextjs-sitemap-generator のどっちか npmの
https://miningoo.com/2327/
1
yarn build && yarn postbuild
1
2
3
4
5
6
7
8
9
$ 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について
下記サイトを参考に実装
ブログを購読していただくために便利な RSS と Atom のフィード情報を生成する方法を紹介します。Next.js 向けにカスタマイズされたパッケージは現状で見つからないため、Node.js 向けのパッケージである feed を今回は利用します。
https://fwywd.com/tech/next-feed-rss-atom
したんだけど... buildした後確認したら500エラーになる
内容確認したらどうやらbuild前後でメソッドが存在しなくなっているよう
調べると下記issueがあった
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...
https://github.com/isaachinman/next-i18next/issues/837
今のnextjsでも治ってないかも
こちら を参考にcontext.resのプロパティを確認した
1
2
3
4
5
6
7
8
9
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
時
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
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
時
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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
で下記内容を追加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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状態でも良いので下記ツールサイトで確認
https://berss.com/feed/
うまく行った