teccon forum

Next.jsデバッグ実践

2 min read

3. サーバーサイド & API デバッグ

3.1 getServerSideProps / API Routes

export async function getServerSideProps(ctx) {
  debugger;
  const data = await fetchData(ctx.params.id);
  return { props: { data } };
}
  • VS Code の Node デバッガで debugger; が機能
  • NODE_OPTIONS="--inspect=9229" を手動設定しても OK

3.2 ログ出力のベストプラクティス

  • pino + pino-pretty を導入: 
    npm install pino pino-pretty
  • logger.js: 
    import pino from 'pino';
export const logger = pino({
  level: process.env.LOG_LEVEL || 'info',
  transport: { target: 'pino-pretty' }
});
  • API 内で: 
    import { logger } from './logger';
logger.info({ route: '/api/user', userId }, 'API called');
  • Structured Logging により Kibana/Datadog で検索しやすく。

5. 生産性向上ワークフロー

5.1 ホットリロード vs フルリロード

  • fast-refresh は UI 層のみリロード。
  • 状態が壊れた際は .next 削除後のフルリロードで環境リセット。

5.2 カスタムエラーページ

// pages/_error.tsx
import NextErrorComponent from 'next/error';
export default function Error({ statusCode }) {
  return <NextErrorComponent statusCode={statusCode} />;
}
  • getInitialProps でエラー情報を取得し、Sentry 連携も可能。

以上を社内テンプレートとして整備し、CI/CD やドキュメントに組み込むことで、プロダクションレベルのデバッグを標準化できます。
confidence: 0.07

Graph View