こんにちは！学生エンジニアの私です。最近ポートフォリオサイトを作っていたんですが、ある問題にぶつかってしまいました。その解決過程を記録してみようと思います。

問題の発見

先日、ポートフォリオサイトのReadingListとStatisticsのコンポーネントが重なって表示される不具合に気づきました。なんだか見栄えが悪くて、ユーザー体験もよくないなと思いました。以前はなかった問題なので、どこで何が悪くなったのか探ってみることにしました。

問題の分析

まずはコードを見てみることにしました。ページの構造を確認するために、app/page.tsxとapp/[locale]/page.tsxのファイルを調べました。すると、ある違いに気づきました！

app/page.tsxでは、各コンポーネントが直接並べて配置されていました
app/[locale]/page.tsxでは、StatisticsやReadingListなどのコンポーネントがすべてLazyLoaderコンポーネントで包まれていました

そこで、LazyLoader.tsxの実装を見てみると、このコンポーネントが追加のdivコンテナを生成していることがわかりました。この追加のdivが、コンポーネント間のレイアウトに影響を与えているのではないかと疑いました。

問題の原因がわかったので、次は解決策を考えました。最もシンプルな方法は、app/[locale]/page.tsxからLazyLoaderでのラッピングを取り除き、app/page.tsxと同じ構造にすることです。

早速コードを編集してみました。app/[locale]/page.tsxのreturn文の中で、各コンポーネントをLazyLoaderで包む部分を削除し、直接配置するように変更しました。

変更を加えた後、開発サーバーを再起動して確認してみました。すると、ReadingListとStatisticsのコンポーネントがきちんと分離して表示されるようになりました！無事に重なり問題が解決されました。

今回の経験から、いくつかのことを学びました：

今後もこのような小さな問題を丁寧に解決しながら、より良いウェブサイトを作っていきたいと思います。

では、また次の記事で！