いつも大変お世話になっております。
表題についてお伺いさせてください。
現在Nextを利用してブログを作っています。
タグによる記事一覧ページを作成しているのですが、
ビルド時に不特定のページで Error occurred prerendering page
というエラーが発生してしまいます。
具体的には、初回ビルド時には
Error occurred prerendering page "/entry/tags/中央防災無線/1". Read more: https://nextjs.org/docs/messages/prerender-error Error: Request failed with status code 500 at createError (/Users/next/node_modules/axios/lib/core/createError.js:16:15) at settle (/Users/next/node_modules/axios/lib/core/settle.js:17:12) at IncomingMessage.handleStreamEnd (/Users/next/node_modules/axios/lib/adapters/http.js:293:11) at IncomingMessage.emit (node:events:402:35) at endReadableNT (node:internal/streams/readable:1343:12) at processTicksAndRejections (node:internal/process/task_queues:83:21) [ ==] info - Generating static pages (410/1816)%
というエラーが発生し、
2回目には
Error occurred prerendering page "/entry/tags/お米/1". Read more: https://nextjs.org/docs/messages/prerender-error Error: Request failed with status code 500 at createError (/Users/next/node_modules/axios/lib/core/createError.js:16:15) at settle (/Users/next/node_modules/axios/lib/core/settle.js:17:12) at IncomingMessage.handleStreamEnd (/Users/next/node_modules/axios/lib/adapters/http.js:293:11) at IncomingMessage.emit (node:events:402:35) at endReadableNT (node:internal/streams/readable:1343:12) at processTicksAndRejections (node:internal/process/task_queues:83:21) [ ==] info - Generating static pages (410/1816)%
の箇所でエラーが発生したりします。
タグの数が1816個もあるため、サーバー側に拒否をされているのでしょうか?
どなたかわかる方がいらっしゃればご教授いただけますと幸いです。
pages以下ディレクトリ構造
pages ├── 404.js ├── _app.js ├── _document.js ├── api │ └── hello.js │ └── entry └── tags └── [tag] └── [page].js
該当のソースコード
javascript
1// lib 2import {getPostsByTag, getTags} from "../../../../lib/posts"; 3 4// components 5import Layout from "../../../../components/Layout"; 6import Post from "../../../../components/Post"; 7import Pagination, {PER_PAGE, range} from "../../../../components/Pagination"; 8import Seo from "../../../../components/Seo"; 9import {useRouter} from "next/router"; 10 11 12export default function PaginationPerPage({posts, postsCount, archiveType, tagName, slug, currentPageNum}) { 13 14 const router = useRouter() 15 if (router.isFallback) { 16 return <div>Loading...</div> 17 } 18 19 return ( 20 <> 21 {/*--------------------- SEO ---------------------*/} 22 <Seo title={`${tagName} - ${currentPageNum}ページ`} description={`${tagName}記事一覧です。`}/> 23 24 {/*--------------------- main ---------------------*/} 25 <Layout slug="archive"> 26 27 <h1>{tagName}<span className='pagination__num'>{currentPageNum}ページ</span></h1> 28 29 <div className="posts"> 30 {posts && posts.map((post) => <Post key={post.id} post={post}/>)} 31 </div> 32 33 <Pagination 34 postsCount={postsCount} 35 archiveType={archiveType} 36 slug={slug} 37 currentPageNum={currentPageNum} 38 /> 39 40 </Layout> 41 </> 42 ) 43} 44 45export const getStaticPaths = async () => { 46 47 /* ------- タグ一覧取得 ------- */ 48 const fetchedTags = await getTags(); 49 const tags = fetchedTags.tags; 50 51 let paths = []; 52 53 /* ------- paths を作成 ------- */ 54 for (const tag of tags) { 55 56 let unitPaths = []; 57 58 let slug = tag.name; 59 let postsCount = tag.count; 60 const pageCount = range(1, Math.ceil(postsCount / PER_PAGE)); 61 62 unitPaths = pageCount.map((num) => { 63 return { 64 params: { 65 tag : slug, 66 page: String(num) 67 } 68 } 69 }) 70 71 paths = paths.concat(unitPaths); 72 73 } 74 75 76 return { 77 paths, 78 fallback: true 79 }; 80} 81 82 83export async function getStaticProps({params}) { 84 85 86 /* ------- URL からパラメータ取得 ------- */ 87 const slug = params.tag; 88 const pageNum = params.page; 89 const currentPageNum = pageNum; 90 const archiveType = "tags"; 91 92 /* ------- 現在のタグ情報を取得 ------- */ 93 const fetchedTags = await getTags(); 94 const tags = fetchedTags.tags; 95 96 // 日本語とローマ字でマッチしない場合があるので、どちらでも対応させる 97 const tag = tags.filter(tag => tag.slug === slug || tag.name === slug) 98 const tagName = tag[0].name; 99 const tagId = tag[0].term_id; 100 101 102 /* ------- タグに紐づく記事全てを取得してページネーションを作成 ------- */ 103 const fetchedAllPosts = await getPostsByTag({ 104 "tagId": tagId, "postsPerPage": -1 105 }); 106 107 const postsCount = fetchedAllPosts.count; 108 109 110 /* ------- 1ページあたりの記事数を取得 ------- */ 111 const fetchedPosts = await getPostsByTag({ 112 "tagId": tagId, "pageNum": pageNum 113 }); 114 115 const posts = fetchedPosts.posts; 116 117 118 return { 119 props: {posts, postsCount, archiveType, tagName, slug, currentPageNum}, 120 }; 121} 122
あなたの回答
tips
プレビュー