DEV Community

ri ki
ri ki

Posted on

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

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:

  1. Build without specifying a return type for the layout component (removing Promise<ReactElement>).
  2. Use { locale: string } type directly for params. If build errors persist, suspect Next.js type definition changes.
  3. 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',
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)