메뉴
Write Next.js App Router error.tsx (and global-error.tsx) so a thrown page does not dump the production digest screen. Auto-applies when creating or editing a data-fetching page.tsx that has no sibling error boundary. Triggered by /next-error-tsx.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/akashp1712/skills --skill next-error-tsx명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Scaffold and implement agent-readiness / AEO for Next.js App Router marketing sites — llms.txt, markdown twins, robots policy, discovery catalogs, optional OpenAPI/MCP/OAuth modules. Use for orank/ora.ai gaps, ChatGPT/Perplexity citations, llms.txt, or "make this site agent-ready". Triggered by /agent-ready-nextjs.
Turn writing into swipe-carousel slides for LinkedIn, Instagram, and TikTok in a warm editorial letterpress style — oversized serif headlines, mono eyebrows, hairline rules, one accent color, and a dot-grid dark treatment. Writes a .deck.md file and renders the size each platform actually wants (LinkedIn square PDF, Instagram 4:5 PNGs, TikTok 9:16 PNGs) using headless Chrome with no dependencies to install. Auto-applies when turning a post, article, README, or skill into slides. Triggered by /carousel-press.
Write and lint Amazon-style specs and narratives — 1-pager, 6-pager, PR/FAQ, tenets, COE — for humans and agents in spec-driven development. Enforces Write Like an Amazonian rules (under 30 words per sentence, data over adjectives, no weasel words, four answers). Auto-applies when drafting or reviewing decision memos, Working Backwards PR/FAQs, agent specs, or leadership documents. Triggered by /amazon-writing.
SKILL.md 표시 중
| name | next-error-tsx |
| description | Write Next.js App Router error.tsx (and global-error.tsx) so a thrown page does not dump the production digest screen. Auto-applies when creating or editing a data-fetching page.tsx that has no sibling error boundary. Triggered by /next-error-tsx. |
| user_invocable | true |
You write the files. The human never has to paste a template.
When a route segment throws, Next shows the digest overlay in production unless error.tsx exists. That is the bug. This skill is the file.
Companion: next-loading-skeleton covers the blank wait. This covers the crash.
Apply when: creating or editing an App Router page.tsx that fetches or calls a server action; the user says error boundary, error.tsx, try again, digest screen, or "something went wrong"; a route has loading.tsx but no error.tsx.
Do not apply when: they want to catch a missing record (that is notFound() + not-found.tsx), they want to swallow an error in a try/catch and keep rendering, or they are on Pages Router.
You run every step.
app/ or src/app/).error.tsx is missing, write it next to page.tsx.app/global-error.tsx is missing, write it. Root layout.tsx errors skip error.tsx.[id], [slug], …) and not-found.tsx is missing, write that too. A 404 is not a 500.@/components/ui/button exists, use it. Do not add shadcn as a new dependency just for this.error.message or error.digest in the UI. Log the digest. Production messages leak internals; the digest is for logs.error.tsxMust be a Client Component. Receives { error, reset }. reset() re-renders the segment — wire it to the primary button.
"use client";
import { useEffect } from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
export default function Error({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
useEffect(() => {
console.error(error.digest ?? error.message);
}, [error]);
return (
<div className="flex min-h-[40vh] flex-col items-center justify-center gap-4 p-8 text-center">
<h2 className="text-xl font-semibold tracking-tight">
This page failed to load
</h2>
<p className="max-w-md text-sm text-muted-foreground">
A temporary fault. Try again. If it keeps happening, go back home.
</p>
<div className="flex gap-3">
<Button onClick={() => reset()}>Try again
Home
);
}
If there is no shadcn Button, use a native <button> and <a href="/">.
Copy: one sentence the user can act on. No "Oops!", no stack, no digest, no "contact support" unless the product already has a support URL.
global-error.tsxPlace at app/global-error.tsx (or src/app/global-error.tsx). It replaces the root layout, so it must render <html> and <body>.
"use client";
import { useEffect } from "react";
export default function GlobalError({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
useEffect(() => {
console.error(error.digest ?? error.message);
}, [error]);
return (
<html lang="en">
<body>
<div style={{ fontFamily: "system-ui, sans-serif", padding: 48, textAlign: "center" }}>
<h2 style={{ fontSize: 20, marginBottom: 12 }}>The app failed to load</h2>
<p style={{ color: "#666", marginBottom: 24 }}>Try again. If it keeps happening, refresh the page.</p>
reset()}>
Try again
);
}
Inline styles are fine here — the root layout (and Tailwind) may be the thing that crashed.
not-found.tsx (dynamic routes only)import Link from "next/link";
export default function NotFound() {
return (
<div className="flex min-h-[40vh] flex-col items-center justify-center gap-4 p-8 text-center">
<h2 className="text-xl font-semibold tracking-tight">Not found</h2>
<p className="text-sm text-muted-foreground">That record is gone, or the link is wrong.</p>
<Link href="/" className="text-sm underline">
Home
</Link>
</div>
);
}
In the page, call notFound() when the fetch returns empty. Do not throw a generic Error for a missing row.
error.tsx does not catch errors in its sibling layout.tsx. Those bubble to the parent error.tsx, or to global-error.tsx for the root layout.redirect(), notFound(), or other Next navigation throws in a try/catch without rethrowing. They are control flow, not failures.error.tsx per segment you actually fetch in. Do not sprinkle empty error files on every folder.loading.tsx is a different file. If the page waits on data and has no loading UI, use next-loading-skeleton. Do not put a spinner inside error.tsx.page.tsx with no error.tsx after a fetch. That is this skill's entire job.error.message. Production users do not need your Prisma query.error.digest. It is a log key, not UI.global-error.tsx without <html> and <body>. It will not mount.error.tsx for 404s. notFound().