質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Q&A

0回答

2714閲覧

[Nextjs] 困っています。。ビルド時に Error occurred prerendering page とエラーが出てしまう

matsuo_basho

総合スコア88

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

0グッド

0クリップ

投稿2021/12/23 02:15

いつも大変お世話になっております。

表題についてお伺いさせてください。
現在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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問