🐡

ポートフォリオサイトのコンポーネント重なり問題を解決してみた

に公開
Next.js
React
TypeScript
i18next
tech

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

問題の発見

先日、ポートフォリオサイトの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のコンポーネントがきちんと分離して表示されるようになりました！無事に重なり問題が解決されました。

学んだこと

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

  1. 複数の環境（今回はロケールごとのページ）で同じ構造を維持することの重要性
  2. コンポーネントをラップする際には、追加のDOM要素がレイアウトに与える影響を考慮する必要がある
  3. 問題が発生したときは、まず基本的な構造を見直すことで解決策が見つかることが多い

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

では、また次の記事で！

Discussion