DEV Community

ri ki
ri ki

Posted on

Umemura Farm Website – Devlog #28: Migrating to Next.js Components and Enhancing Visuals

Today's Work: Migrating to Link and Image Components

Today I focused on improving code quality and performance by migrating from traditional HTML elements to Next.js components:

  • Replaced <a href> with <Link> for client-side routing
  • Replaced <img> tags with Next.js <Image> component for optimized image loading

Layout Fixes and Responsive Adjustments

The migration caused some layout shifts, so I spent time fixing those issues and ensuring the design remained responsive across devices.

Creating a Shared Breadcrumb Component

To maintain consistency, I created a shared breadcrumb component to be used across multiple pages.

Visual Enhancements with Overlay and CSS Filters

For images with strong contrasting colors, I added a semi-transparent warm-tone overlay to harmonize the visuals.

Additionally, I applied CSS filters such as saturate and brightness to adjust colors subtly for better cohesion.

Adjusting Vertical Text Spacing

For vertical Japanese text, I widened the spacing between characters using this approach:

tsx
<span className="font-medium text-sm text-white leading-8">
  {'宿\n泊\n予\n約'.split('\n').map((char, i) => (
    <span key={i} className="block">{char}</span>
  ))}
</span>
Enter fullscreen mode Exit fullscreen mode

Tomorrow's Plan: Button Component Unification

I currently have two different button component patterns in the project.
Tomorrow, I plan to standardize and unify them into a single consistent pattern to improve maintainability.

tags: nextjs, react, frontend, portfolio, css

Top comments (0)