DEV Community: ri ki

Umemura Farm Website – Devlog #41: LP is completed!

ri ki — Thu, 24 Jul 2025 00:31:53 +0000

Project Launch: Umemura Farm - Award-Winning Asparagus Direct Sales & Farmstay Experience LP

What is this LP about?

I just completed a comprehensive landing page for Umemura Farm, a family-run asparagus farm in Saga, Japan. This project showcases a unique dual value proposition: premium asparagus direct sales (sweet enough to eat raw, gold award winner from vegetable sommelier competitions) and exclusive farmstay experiences (limited to one group per day).

Target Audience:

Health-conscious consumers seeking premium vegetables
Families interested in authentic farm-to-table experiences
Travelers looking for genuine Japanese countryside stays
Gift buyers seeking unique, high-quality Japanese produce

Background & Challenges:

Saga Prefecture is Japan's 2nd largest asparagus producer but lacks recognition
Limited direct-from-farm sales despite superior quality to market products
Need to compete against established Hokkaido asparagus reputation
Complex seasonal variations (spring/summer/autumn harvests) requiring different marketing approaches

Tech Stack:

Next.js - SEO optimization and dynamic seasonal content management
Tailwind CSS - Mobile-first responsive design with consistent styling
next-intl - Seamless Japanese/English localization
Seasonal Logic System - Month-based automatic content switching
WebP Optimization - Fast mobile loading for Japanese users

Features

Psychology-Based 10-Stage AIDCA Framework
Following Attention → Interest → Desire → Conviction → Action methodology:

Impact Hero Section - "Eat it raw and be amazed! Sweeter than fruit asparagus"
Urgency Section - Seasonal limited campaigns with bonus quantities
Problem Identification - "Think thick asparagus only comes from Hokkaido?"
Solution Presentation - Direct-from-farm freshness and quality advantages
Value Proof - Gold awards, 4.8★ customer ratings, social proof
Emotional Value - Producer couple's success story from abandoned farmland
Risk Reduction - Quality guarantees, support systems, storage instructions
Price Justification - Spring water cultivation, craftsmanship, express shipping value
Action Induction - Multi-EC integration, LINE ordering options
Final Push - Limited bonuses, stock warnings for decision acceleration

Seasonal Adaptation System
Dynamic content switching based on harvest periods:

// Seasonal content logic example
const getSeasonalContent = (currentMonth) => {
  if (currentMonth >= 3 && currentMonth <= 5) {
    return {
      period: "Spring Shoots",
      description: "Sweetest & richest flavor, premium L-size",
      campaign: "Spring-limited tenderness experience"
    }
  } else if (currentMonth >= 6 && currentMonth <= 8) {
    return {
      period: "Summer Shoots", 
      description: "Refreshing sweet, early summer L-size",
      campaign: "100g bonus campaign active"
    }
  }
  // Fall shoots & winter pre-order conditions
}

Key Differentiators

Raw Edible Appeal: Specific sugar content (8.5+ Brix) data
Freshness Management: Harvest→immediate refrigeration→express shipping process
Variety Expertise: Greenhouse-grown "Welcome" variety technical advantages
Regional Uniqueness: Imari Hachimandake spring water cultivation environment

Design Philosophy

Color System: Asparagus green (#2a9d8f) for CTAs, alternating white/pale yellow backgrounds
Typography: "Shippori Mincho" serif font for authentic Japanese feel
Watercolor Aesthetics: Soft, natural palette reflecting organic farming approach
Privacy-First: Watercolor speech bubbles for testimonials without revealing personal information

Challenges

Complex Seasonal Product Marketing Challenge: Asparagus has distinct characteristics across spring/summer/autumn harvests, difficult for general consumers to understand.

Solution:

Visual seasonal timeline with taste profiles and availability
Month-based automatic content switching system
LINE notification system for harvest timing alerts

Competing Against Hokkaido Brand Dominance Challenge: Overcoming "Asparagus = Hokkaido" consumer perception.

Solution:

Concrete comparison data (shipping costs, delivery time, freshness)
Authority positioning with "Saga Prefecture: 2nd largest producer nationally"
Direct-from-farm benefits emphasizing eliminated middleman margins

Balancing Emotional vs. Logical Value Challenge: Quality data alone insufficient for differentiation; emotion alone insufficient for trust.

Solution:

Producer story (abandoned farmland success) for emotional appeal
Gold awards, sugar content data, storage instructions for logical confidence
Customer testimonials for experience-based social proof

Multi-EC Integration Purchase Flow Challenge: Managing Rakuten, Tabechoku, Pocket Marche, BASE, LINE ordering distinctions.

Solution:

User-type-specific channel recommendations
"Online difficulty → LINE cash-on-delivery" accommodation
3-step purchase flow for cognitive load reduction

Behavioral Economics & Psychology Implementation

Scarcity Principle

"Until end of June," "Limited stock remaining," "Harvest quantity limited"
Natural scarcity value through seasonal limitations

Social Proof

Vegetable Sommelier Gold Award, JA Excellence Award authority
4.8★ customer ratings with authentic reviews
"Sweeter than Hokkaido" comparative testimonials

Loss Aversion

"Don't buy now, you'll lose out," "Risk of missing peak season"
Limited-time bonus campaign exclusivity

Cognitive Load Reduction

3-step purchase process simplification
FAQ condensed to 5 essential items
Progressive information disclosure avoiding overwhelm

Localization (i18n)

next-intl Implementation Strategy
Cultural Adaptation beyond simple translation:

Japanese Version: Detailed seasonal information, producer story emphasis, privacy considerations
English Version: "Sweet enough to eat raw" surprise experience focus, gift market appeal
SEO Optimization: Language-specific keyword targeting and meta optimization

Translation Management

Seasonal content automatic multilingual switching
Consistent agricultural terminology across languages
Cultural sensitivity in privacy handling and quality standards

Market Segmentation

Primary: Japanese domestic customers familiar with farm reputation
Growing: International tourists seeking authentic farm experiences
Gift Market: Overseas customers sending premium Japanese produce

Links

GitHub Pages site: [https://rikki3322.github.io/nouenUmemura/]
EC Integrations: Rakuten, Tabechoku, Pocket Marche, BASE

Feedback Welcome!

This project tackles the unique challenge of "Traditional Agriculture DX" - a distinctly Japanese issue of digitizing traditional farming businesses. I'd especially value your thoughts on:

Technical Aspects

Seasonal Logic Systems: How to efficiently systematize agricultural time-based variations
Multi-EC Integration: Optimizing purchase flows across different platform characteristics
Mobile Optimization: UX design considerations for agricultural sector user behaviors

Marketing Strategy

Regional Branding: Strategies for elevating "Saga Asparagus" recognition against Hokkaido dominance
Behavioral Economics: Overcoming psychological barriers in agricultural product purchasing
Competitive Differentiation: Communicating advantages against established regional brands

Cultural & Social Impact

Direct-from-Farm Promotion: Articulating consumer benefits of eliminating middleman distribution
Food Education Value: Designing experiences around "raw eating surprise"
Sustainability: Contributing to small-scale farm business stability

Looking for insights from anyone working in Agriculture×Tech, regional revitalization, or food culture projects. Share your experiences with seasonal products, cultural marketing, or rural business digitization!

nextjs, #tailwindcss, #agriculture, #behavioraleconomics, #seasonalcommerce, #japan, #i18n, #mobilefirst, #farmtech

Umemura Farm Website – Devlog #40: Fixing i18n Text Styling Issues and Final Touches on My Project

ri ki — Fri, 18 Jul 2025 23:15:29 +0000

Today's Work: Fixing i18n Text Styling with Dynamic Emphasis

When implementing i18n support, I encountered an issue where parts of the text wrapped in <span> tags for color emphasis did not render correctly. Instead, the raw HTML code appeared on the page.

The Problem

For example, the JSON data looked like this:

{
  "text": "10月以降のお申し込みは",
  "emphasis": "翌年発送",
  "textAfter": "のご予約となります。"
}

But the emphasized part wrapped in tags was not interpreted as HTML and showed literally.

The Solution
By using the translation hook's raw output combined with conditional rendering, I updated the component as follows:

{t.raw('section5.items').map(
  (
    item: string | { text: string; emphasis: string; textAfter?: string },
    i: number
  ) => (
    <li key={i}>
      {typeof item === 'string' ? (
        item
      ) : (
        <>
          {item.text}
          <span className="text-red-500">{item.emphasis}</span>
          {item.textAfter ?? null}
        </>
      )}
    </li>
  )
)}

This way, the emphasis part is properly wrapped in a with the desired styling, and the text renders correctly.

Other Work
Made small refinements to some English expressions throughout the site for better clarity and naturalness.

No major code or design changes were needed—mostly iterative polishing.

Wrapping Up
With this fix and minor touch-ups complete, I consider the main development phase of this project finished. This blog series will conclude here.

Thank you for following along with my journey on this project!

tags: nextjs, i18n, react, localization, frontend, portfolio

Umemura Farm Website – Devlog #39: Button Design Fixes and Overcoming Next.js Type Issues on Netlify Deployment

ri ki — Fri, 18 Jul 2025 02:12:57 +0000

Today's Work: Button Styling and Netlify Deployment Troubleshooting

Button Design Fix

Fixed the button size by setting width: 56px and height: 204px directly in the className styles for consistent appearance.

Netlify Deployment Challenges with Next.js Types

I encountered common type-related build errors during deployment related to Next.js’s official LayoutProps type.

Key Issues:

The definition of LayoutProps has likely changed in the latest Next.js 15.x series.
Specifically, the params property may sometimes be passed as a Promise (i.e., asynchronous), while normally it is expected to be a simple object like { locale: string }.

Workarounds Tried:

Build without specifying a return type for the layout component (removing Promise<ReactElement>).
Use { locale: string } type directly for params. If build errors persist, suspect Next.js type definition changes.
If the latest Next.js requires asynchronous params, adjust the typing accordingly or fallback to any to bypass type errors temporarily.

Deployment Result and 404 Error

Deployment succeeded but the page returned a 404 error.
Removing the i18n config from next.config.js resolved the 404 issue:

// Removed this block
i18n: {
  locales: ['ja', 'en'],
  defaultLocale: 'ja',
}

tags: nextjs, netlify, typescript, i18n, frontend, portfolio

Umemura Farm Website – Devlog #38: Implementing Full i18n Support and Tackling Netlify Deploy Errors

ri ki — Thu, 17 Jul 2025 03:34:46 +0000

Today's Work: i18n Support Across All Pages and Netlify Deployment Troubleshooting

Today, I completed the internationalization (i18n) support for all pages, including creating the necessary translation files (e.g., ja.json and en.json).

Netlify Deployment Error and Diagnosis

While attempting to deploy the project to Netlify, I encountered a build error caused by a type mismatch in the file src/app/[locale]/layout.tsx.

Error Details:

The params property was expected to be a Promise<any>, but a Record<string, string> was provided.
This caused the Next.js build to fail, stopping the deployment process.

Despite this issue being unresolved, progress is ongoing.

Tomorrow's Plan

Continue debugging and fixing the Netlify deployment error.
Adjust the design of buttons that display vertically in Japanese (vertical text), and rotate English buttons 90 degrees clockwise for a better UX.

This project is progressing steadily, with multilingual support shaping up well, and deployment hurdles actively being addressed.

tags: nextjs, i18n, netlify, typescript, frontend, portfolio

Umemura Farm Website – Devlog #37: Continuing i18n Integration and Visual Improvements with blurDataURL

ri ki — Wed, 16 Jul 2025 02:16:38 +0000

Today's Work: Continuing i18n Support and Visual Enhancements

Today, I continued working on the internationalization (i18n) implementation started yesterday.

Using blurDataURL for Image Optimization

I integrated blurDataURL to improve image loading UX by showing a low-resolution placeholder while the main image loads. This helps create a smoother visual experience.

Visual Consistency and Responsive Design

Alongside i18n, I focused on:

Unifying the appearance across sections to ensure a cohesive design
Improving the responsive layout for better usability on various devices

Next Steps

Tomorrow, I plan to continue these improvements, progressing further with i18n support and refining the design consistency and responsiveness.

The project is moving steadily forward!

tags: nextjs, i18n, blurDataURL, responsive-design, portfolio

Umemura Farm Website – Devlog #36: Adding English Support and Starting i18n Integration

ri ki — Tue, 15 Jul 2025 04:57:58 +0000

Today's Work: Beginning Internationalization (i18n)

Today, I began the process of making the site multilingual by adding support for an English version of the website.

i18n Setup and Progress

To enable internationalization, I started with the basics:

Created translation files:
- ja.json for Japanese
- en.json for English
Implemented language-switching logic using next-intl.
Added a JP / EN language toggle to the navigation bar.

At this point, I’ve completed translation for three sections of the website. I’ll continue updating the remaining sections step by step.

Debugging Monthly Text Logic

There is a debug page used to test whether month-based seasonal content displays correctly. Now that multilingual support is involved, I need to think about how to handle this logic in both languages.

For now, I’m choosing to prioritize simpler sections first, and will come back to the more complex parts after completing the basics.

Next Steps

Continue translating additional sections
Plan how to handle debug logic with i18n
Start reviewing seasonal and conditional text rendering in both languages

The foundation is set, and I'm excited to bring full multilingual support to the site!

tags: nextjs, i18n, multilingual, portfolio, react

Umemura Farm Website – Devlog #35: Deploying to Netlify and Performance Improvements with Video Compression

ri ki — Mon, 14 Jul 2025 02:14:39 +0000

Today’s Work: Deploying to Netlify and Performance Optimization

Today, I deployed my project to Netlify and tested the performance in the production environment.

Performance Bottleneck: Hero Video Loading Time

I noticed the initial page load was slow, mainly due to the hero video size. To address this, I used FFmpeg to compress the video, reducing its size from 5.58MB to 3.4MB, a significant improvement.

Image Optimization on Farm Stay Page

For the farm-stay page, I optimized the hero image by specifying explicit width and height instead of using the full size. Here is the updated <Image> component:


<Image
  src="/assets/images/stay/hero2.webp"
  alt="Hero background"
  width={800}
  height={600}
  className="object-cover w-full h-full"
  priority
/>

This change helped with layout stability and loading speed.

Lighthouse Scores
After these optimizations, my Lighthouse scores were:

Performance: 85

Accessibility: 89

Best Practices: 82

SEO: 91

Project Conclusion

With these final improvements, I consider this project complete.

It was a great learning experience focusing on deployment and real-world performance tuning.
I’m excited to apply these skills in future projects!

tags: nextjs, netlify, performance, video-compression, portfolio

Umemura Farm Website – Devlog #34: Fixing Scroll Animation and Hydration Mismatch in Next.js

ri ki — Sun, 13 Jul 2025 01:00:22 +0000

Today’s Work: Fixing Scroll Animation Hover and Hydration Mismatch Error

I spent today fixing the scroll animation so that it properly pauses on hover. During this process, I encountered a common Next.js issue called the "hydration mismatch" error.

What Causes Hydration Mismatch?

This error happens when the HTML rendered on the server does not match what React renders on the client during hydration. In my case, the root cause was:

Embedding dynamic values like imageWidth and images.length (which can differ between server and client) directly into CSS styles.
Using <style jsx global> with calculated pixel values in @keyframes animations.

Key Points and Solutions

Use percentage values (%) instead of dynamic pixel (px) values inside @keyframes.

For example, instead of translateX(-${imageWidth * images.length}px), use translateX(-100%).
Control animation duration and other dynamic properties via inline styles rather than global CSS to avoid discrepancies between server and client.
The transform: translateX(-50%) means the images scroll by half their total width because the images are duplicated to create an infinite scrolling effect.
Pause on hover by toggling a CSS class that changes animation-play-state. However, if the hover state differs between server and client renders, it will cause hydration issues.
Since I wasn’t using useState or useEffect, some client-side value changes weren’t syncing properly.

Proposed Approach

Keep the dynamic parts of the animation in inline styles that run only on the client.
Use fixed CSS animations with percentages in global styles.
Set the container widths dynamically to match the parent element.
Avoid embedding dynamic pixel values inside @keyframes.

Deployment Challenges

After applying these fixes, I deployed the site to Netlify to verify behavior in production. However, the root folder was still set to an old LP project I had worked on before, so Netlify wasn’t serving this project correctly.

To fix this, I deleted the old project folder locally and removed the repository on GitHub to reset it properly.

Next Steps

Tomorrow, I plan to redeploy to Netlify with the correct folder and check the page speed and animation behavior in the live environment.

Fixing hydration mismatches in Next.js animations is tricky, but taking care to separate dynamic client-only values from static CSS is the key to a smooth user experience.

tags: nextjs, react, animation, performance, hydration, portfolio

Umemura Farm Website – Devlog #33: Performance vs. Perception: Rethinking Lighthouse Scores

ri ki — Sat, 12 Jul 2025 08:41:47 +0000

Today’s Work: Performance Cleanup and Scroll Animation Refactor

Today was one of those days where development leads to more reflection than resolution.

I began with the goal of optimizing my portfolio site for performance, particularly focusing on Lighthouse scores. But what I discovered shifted my perspective.

Attempted JS Cleanup (With Minimal Gain)

I reviewed the codebase for any unused JavaScript that could be removed to lighten the page.

To my surprise, there weren’t any significant candidates.
I then tried to address Lighthouse suggestions one by one. Ironically, the more optimizations I applied, the heavier the page became, and the Lighthouse score barely changed.

Out of curiosity, I ran Lighthouse on one of the reference sites I’ve been using for inspiration, their score was only around 60.

This got me thinking, 'How much should I take it seriously?'

Shifting Focus: From Scores to Experience

From today forward, I’ve decided not to chase perfection in Lighthouse.

Instead, I’ll focus on actual user experience:

Fast initial loading
Smooth page transitions
Intuitive interactions

After all, a site that feels fast is better than one that only scores fast.

Refactoring Scroll Animation

I refactored the scroll-triggered animation logic into its own reusable file so that it can be imported across multiple components.

The goal was cleaner code and easier maintenance.

tags: nextjs, performance, frontend, javascript, portfolio

Umemura Farm Website – Devlog #32: Enhancing UX and Storytelling in My Farm Stay Project

ri ki — Fri, 11 Jul 2025 02:56:00 +0000

Today's Progress: Designing with Story and Sensory Experience

In today’s development session, I focused on enhancing both visual storytelling and user experience in the Farm Stay section of my LP project. The goal was to make the website not just functional, but emotionally resonant.

Hero Section Redesigned with a Personal Touch

The previous hero image for the Farm Stay section featured a generic asparagus photo from Unsplash. However, I recently discovered on the farmer's social media that they had purchased a vintage car. Inspired by this, I replaced the hero image with a scene of the car driving through a rural landscape, a more personal and evocative visual.

New Catchphrase:

“Take a peaceful break at our countryside farm stay.

Experience the luxury of time spent with nature.”

This message is designed to evoke warmth, nostalgia, and serenity, all core to the rural experience.

Scroll to Top via Logo Tap

For better usability, I implemented a feature where tapping the logo scrolls the page to the top. This is especially helpful on mobile where navigation can feel more limited.

Room Description Rewrite

I updated the room descriptions in the Farm Stay section to enhance sensory storytelling especially around scent and atmosphere.

For example, phrases like “the gentle aroma of tatami” help visitors imagine the stay more vividly.

Mobile-Only Button Fix

I noticed a button for mobile-only was not yet included in the centralized button.ts file.

I added it and refactored the code wherever this button was used to maintain consistency and future maintainability.

What’s Next

Tomorrow, I’ll run another Lighthouse to evaluate the latest performance state.

Based on the results, I’ll create a roadmap to gradually increase the score and optimize both speed and accessibility.

Creating a meaningful and performant experience requires more than just code. It’s about crafting a story, connecting with real-world details, and caring about how people feel when they interact with your product.

tags: nextjs, webdev, design, portfolio, lighthouse

Umemura Farm Website – Devlog #31: Performance Optimization and Code Refinement in My Next.js Project

ri ki — Thu, 10 Jul 2025 03:17:31 +0000

Today's Work: Performance Improvements and Code Cleanup

Today I focused on several performance-related tasks as well as refining code structure to enhance user experience and maintainability.

Page Lazy Loading Experiment and Results

I experimented with lazy-loading to improve initial load performance.

The goal was to prioritize rendering of:

Header
Footer
CTA buttons
Hero section

while deferring the rest of the page.

Outcome: Unfortunately, this approach caused the footer to load first on page open, which felt counterintuitive and reduced perceived performance.

After evaluation, I decided to reject this strategy for now.

Optimizing Icon Imports

Previously, I imported lucid-icon components separately in each component file.

To improve bundle size and code clarity, I consolidated all imports into a single lucid-icon.ts module.

However, I mistakenly used dynamic imports for this module, which caused extremely slow page transitions.

I reverted to a simple static import/export approach, restoring smooth navigation.

Improving EC Site Recommendation Logic

On the EC site recommendation page, I found that one of the purchase options was missing from the candidate list.

I added the missing option and refined the user questionnaire logic to ensure fair and clear recommendations without bias.

Setting Lighthouse Performance Goals

I set specific Lighthouse score targets to define clear performance goals for this project.

The benchmark is to outperform the client’s current LP, which helps me prioritize improvements effectively.

Tomorrow’s Focus: Unused JavaScript and Font Issues

Identify and handle unused JavaScript to further reduce bundle size and improve load times
Continue investigating the font loading issue, which still prevents my specified fonts from rendering correctly

Performance optimization is an iterative process. Every improvement counts toward a faster, more enjoyable user experience.

tags: nextjs, performance, frontend, lighthouse, portfolio

Umemura Farm Website – Devlog #30: Fixing Link Errors, Button Unification, and More UI Enhancements in Next.js

ri ki — Wed, 09 Jul 2025 02:17:25 +0000

What I Worked On Today

Here’s a quick rundown of the improvements and bug fixes I tackled today in my Next.js project:

Link Nesting Error Fix

I fixed a common Next.js error caused by wrapping an <a> tag inside a <Link> component.

This triggers a nesting warning like:

"Warning: <a> cannot appear as a descendant of <a>..."

Solution: Removed the inner <a> and applied styling/behavior directly on the <Link> component.

Button Variant Unification with shadcn/ui

To make button styling consistent and easier to maintain, I centralized button variants:


variants: {
  variant: {
    default: 'bg-primary text-primary-foreground hover:bg-primary/90',
    outline: 'border border-input hover:bg-accent hover:text-accent-foreground rounded-md',
    line: 'text-gray-600 hover:text-green-600 transition-colors',
    cta: 'bg-green-600 text-white hover:bg-green-700 shadow-lg hover:shadow-xl',
    ghost: 'bg-transparent hover:bg-gray-100 text-gray-700',
    faqToggle: 'w-full px-6 py-4 text-left flex justify-between items-center hover:bg-gray-50 transition-colors shadow-none hover:shadow-none rounded-md',
  }
}

Now buttons across the site are easier to update and visually consistent.

Applied Scroll-Based Animations
I added a previously built FadeInOnScroll animation component to enhance image interactivity and user experience. Example:

<FadeInOnScroll>
  <div className="h-48 overflow-hidden bg-gray-100 flex items-center justify-center rounded-lg">
    <RandomDishImage className="w-full h-full object-cover" />
  </div>
</FadeInOnScroll>

This makes image sections feel more dynamic and engaging.

Added a Favicon (SVG)
I finally added a favicon to the site by updating the metadata in the layout:

export const metadata = {
  title: 'うめむら農園｜採れたて新鮮なアスパラを直送',
  description: '新鮮なアスパラガスを農家から直送',
  icons: {
    icon: '/favicon.svg',
  },
};

It’s a small touch, but it improves brand recognition and tab visibility.

Up Next: Font Rendering Issue
One lingering issue is that custom fonts are not rendering correctly despite being defined in tailwind.config.js and loaded via layout.
Tomorrow, I’ll dig deeper into debugging font fallback and variable font behavior.

tags: nextjs, shadcn-ui, javascript, frontend, performance