先说说 Next.js 的错误边界

说实话，Zuo SPA 时出错hen常见。

Next.js 给你一套文件约定，省心。

根目录的 global-error.tsx，像全局的保险箱。

它只在整个 app 崩溃时才会被叫到。

不对不对，应该是当 layout 抛异常，error.tsx 才Neng捕获。

咱就是说错误捕获范围必须搞清楚。

每个路由段douKe以放一个 error.tsx。

它只负责同级和子级的错误。

比如 /blog/error.tsx，只管博客页出事。

别慌，它不会影响首页的正常渲染。

'use client';
import { useEffect } from 'react';
export default function BlogError {
  useEffect => {
    console.error;
    // 这里Ke以发送到自建日志系统
  }, );
  return (
    

      
😕
      博客内容加载失败
      
{error.message || '出点小问题，请稍后再试'}
      重试
    
  );
}

这玩意儿是Zui后一道防线。

当根 layout dou挂了它会直接渲染完整的 html、body。

别忘了加上语言属性，不然 SEO 会抓狂。

'use client';
export default function GlobalError {
  return (
        

          

            
错误代码：{error.digest || '未知'}
            刷新页面
          
        
  );
}

用户等太久会刷掉页面。

Suspense + loading.tsx，让骨架屏飞起来。

哈哈，我Zui爱那种灰色占位块，kan着就舒服。

export default function Loading {
  return (
    

      {/* 页面标题骨架 */}
      

      {/* 卡片网格 */}
      

        {Array.from.map => (
          

            {/* 图片占位 */}
            

            {/* 文本占位 */}
            

              

              

            
          
        ))}
      
    
  );
}

有时候你只想给某块儿加 loading，不想整页卡住。

'use client' 必须写在Zui前面否则 reset 用不了。

'use client';
import { Suspense } from 'react';
import { UserStats } from '@/components/UserStats';
import { StatsSkeleton } from '@/components/skeletons';
export default function DashboardPage {
  return (
    

      {/* 数据统计 */}
      }>&l t;&l t;&l t;&l t;
      {/* Zui近活动 */}
      加载中…"}>&l t;&l t;
    
  );
}

Sentry 是业界老大哥，接入一步到位：

npx @sentry/wizard@latest -i nextjs

Sentry 自动捕获未处理异常，还会把用户信息一起扔进去，超级赞！

Ru果不想买服务，你也Ke以自己写个接口：

'use client';
import { useEffect } from 'react';
export default function ErrorPage {
  useEffect => {
    fetch('/api/log-error', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        message: error.message,
        stack: error.stack,
        url: window.location.href,
        ua: navigator.userAgent,
        ts: new Date.toISOString,
      }),
    }).catch => {});
  }, );
  return (
    // 简单 UI 略
    null
  );
}

这个问题经常被问到，害，我先说一下原因吧：

SSR 渲染不足：#SSR# 渲染的 HTML 内容太少，爬虫kan不到真实内容；

Noindex 标签：误加了 ;

Sitemap 配置错误：sitemap.xml 路径或格式不符合规范；

Crawl 延迟：Baidu 的抓取频率比 Google 慢，需要耐心等待几天；

PJAX/SPA 动态路由：Baidu 对 JavaScript 渲染支持有限，需要配合预渲染或 hybrid 模式；

解决办法嘛，就是打开 把 { output: 'standalone' }` 放进去，然后在 /pages/_document.js` 加上关键 meta。这样搜索引擎才Nengkan到完整 DOM。你懂的，一点点调试就行啦~ 哈哈！