This content originally appeared on DEV Community and was authored by ri ki
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
This content originally appeared on DEV Community and was authored by ri ki
ri ki | Sciencx (2025-07-09T02:17:25+00:00) Umemura Farm Website – Devlog #30: Fixing Link Errors, Button Unification, and More UI Enhancements in Next.js. Retrieved from https://www.scien.cx/2025/07/09/umemura-farm-website-devlog-30-fixing-link-errors-button-unification-and-more-ui-enhancements-in-next-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.