DEV Community: yone3

How I Added i18n to My Next.js App Router Project

yone3 — Sun, 19 Apr 2026 06:59:10 +0000

Hey everyone!

I recently added multilingual support (Japanese + English) to my side project unsolved — a silly joke app that takes your everyday problems and generates a sci-fi story about how "humanity's collective wisdom" solved it. 😄

Since the concept is kind of universal (everyone has problems, right?), I wanted English-speaking users to enjoy it too. So I went ahead and implemented i18n.

In this post, I'll walk through how I did it using next-intl — which turned out to be a great fit for Next.js App Router.

Why next-intl?

Next.js does have its own i18n config, but it doesn't play super nicely with App Router. After some research, next-intl seemed like the most App Router-friendly option out there, with solid TypeScript support to boot.

Installation is just:

npm install next-intl

File Structure Overview

Here's what the project looks like after setup:

src/
├── middleware.ts           # Locale detection & redirect
├── i18n/
│   ├── routing.ts         # Supported locales & default
│   ├── request.ts         # Server-side message loading
│   └── navigation.ts      # Locale-aware Link/useRouter
├── app/
│   └── [locale]/          # All pages live here
│       ├── layout.tsx
│       ├── page.tsx
│       └── LocaleSwitcher.tsx
└── messages/
    ├── ja.json
    └── en.json

Let's go through each piece.

Define Your Locales ( `src/i18n/routing.ts` )

import { defineRouting } from 'next-intl/routing'

export const routing = defineRouting({
  locales: ['ja', 'en'],
  defaultLocale: 'ja',
  localePrefix: 'as-needed',
})

With localePrefix: 'as-needed', the default language (Japanese) uses / and English uses /en/. Change it to always if you want /ja/ and /en/ for all locales.

Middleware ( `src/middleware.ts` )

import createMiddleware from 'next-intl/middleware'
import { routing } from './i18n/routing'

export default createMiddleware(routing)

export const config = {
  matcher: ['/((?!api|_next|_vercel|.*\..*).*)'],
}

This middleware reads the browser's language setting and automatically redirects to the right locale. Visitors with English browsers get sent to /en/ — all handled by this one file.

Server-side Request Config ( `src/i18n/request.ts` )

import { getRequestConfig } from 'next-intl/server'
import { routing } from './routing'

export default getRequestConfig(async ({ requestLocale }) => {
  let locale = await requestLocale
  if (!locale || !(routing.locales as readonly string[]).includes(locale)) {
    locale = routing.defaultLocale
  }

  const messages =
    locale === 'en'
      ? (await import('../../messages/en.json')).default
      : (await import('../../messages/ja.json')).default

  return { locale, messages }
})

This loads the right translation file per request. Invalid locales fall back to the default — no worries about weird URLs.

`next.config.ts`

import type { NextConfig } from 'next'
import createNextIntlPlugin from 'next-intl/plugin'

const withNextIntl = createNextIntlPlugin('./src/i18n/request.ts')

const nextConfig: NextConfig = {}

export default withNextIntl(nextConfig)

Translation Files

messages/en.json

{
  "metadata": {
    "title": "Humanity Never Gives Up",
    "description": "Solve your problems with the collective wisdom of humanity"
  },
  "header": {
    "title": "Humanity Never Gives Up",
    "sub": "You saved the world"
  },
  "input": {
    "nameLabel": "Your Name",
    "submitBtn": "Request a Solution"
  }
}

Keys are nested and accessed with dot notation like t('header.title'). Simple and TypeScript-friendly.

Navigation Utilities ( `src/i18n/navigation.ts` )

import { createNavigation } from 'next-intl/navigation'
import { routing } from './routing'

export const { Link, redirect, usePathname, useRouter } = createNavigation(routing)

Use this Link instead of Next.js's built-in one — locale is carried over automatically.

The `[locale]` Layout ( `src/app/[locale]/layout.tsx` )

All pages go under app/[locale]/. This is the key structural change.

import { NextIntlClientProvider } from 'next-intl'
import { getMessages, getTranslations } from 'next-intl/server'
import { notFound } from 'next/navigation'
import { routing } from '@/i18n/routing'

type Props = {
  children: React.ReactNode
  params: Promise<{ locale: string }>
}

export async function generateMetadata({ params }: Props) {
  const { locale } = await params
  const t = await getTranslations({ locale, namespace: 'metadata' })
  return {
    title: t('title'),
    description: t('description'),
  }
}

export function generateStaticParams() {
  return routing.locales.map((locale) => ({ locale }))
}

export default async function LocaleLayout({ children, params }: Props) {
  const { locale } = await params
  if (!routing.locales.includes(locale as 'ja' | 'en')) notFound()

  const messages = await getMessages()

  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  )
}

NextIntlClientProvider passes translations down to Client Components too. Any unsupported locale hits notFound() and returns a 404.

Using Translations

In a Server Component, use getTranslations (async):

import { getTranslations } from 'next-intl/server'

export default async function Page() {
  const t = await getTranslations('header')
  return <h1>{t('title')}</h1>
}

In a Client Component, use the useTranslations hook:

'use client'

import { useTranslations } from 'next-intl'

export default function SubmitButton() {
  const t = useTranslations('input')
  return <button>{t('submitBtn')}</button>
}

Language Switcher Component

Here's the actual LocaleSwitcher from unsolved:

'use client'

import { useState } from 'react'
import { useLocale } from 'next-intl'
import { Link, usePathname } from '@/i18n/navigation'
import { routing } from '@/i18n/routing'

export default function LocaleSwitcher() {
  const locale = useLocale()
  const pathname = usePathname()
  const [open, setOpen] = useState(false)

  return (
    <div>
      <button onClick={() => setOpen(o => !o)}>
        🌐 {locale.toUpperCase()}
      </button>
      {open && (
        <div>
          {routing.locales.map(l => (
            <Link key={l} href={pathname} locale={l} onClick={() => setOpen(false)}>
              {l.toUpperCase()}
            </Link>
          ))}
        </div>
      )}
    </div>
  )
}

<Link href={pathname} locale={l}> keeps you on the same page and just swaps the locale — next-intl handles the URL conversion automatically.

Wrapping Up

next-intl works great with Next.js App Router and is easy to set up
The middleware handles automatic locale detection and redirects
Use getTranslations in Server Components, useTranslations in Client Components
Once the config is in place, adding new translations is just editing JSON files

You can see all of this running live at unsolved. It's a little joke app — type in a problem, and it generates a ridiculous sci-fi story about how AI saved the day. Hit the 🌐 button in the top right to switch languages!

Feel free to leave a comment if you have any questions!

Tried building a file explorer using NativePHP v2 (nativephp/desktop)

yone3 — Wed, 26 Nov 2025 09:19:52 +0000

What's NativePHP?

Did you know you can actually build desktop apps with PHP?
Yeah, there's this thing called NativePHP... 😏
Recently (well, last month actually), it got a major version update!

https://nativephp.com/blog/nativephp-for-desktop-v2-released

I'd been curious about it for a while but never actually tried implementing anything with it. So I thought, "Why not give it a shot?" and decided to build something that feels like a native app - a file explorer!

https://github.com/engineer-yone3/nativephp-de-explorer

Here's a quick walkthrough from setup to implementation for future reference.

Let's Build Something!

Installation

Before diving into NativePHP, there's one thing you need to do first: set up a Laravel environment!

composer create-project laravel/laravel

After creating your Laravel project with the usual command, install NativePHP:

composer require nativephp/desktop

Once NativePHP is installed, you need to apply it to your project.

It follows the same installation flow as other Laravel packages (like Jetstream or Livewire).

php artisan native:install

That's basically it! If you want to customize the Electron-related code that NativePHP uses under the hood, you can publish it:

php artisan native:install --publish

This will expose the code to your project for customization.

Time to Code

Since it's built on Laravel, you can implement everything using the familiar MVC pattern.

Click a button → Controller kicks in → Uses Model → Maybe implement a Service layer → Display with Blade. The usual flow!

Here's what's specific to NativePHP: when you installed it earlier, a file called app/Providers/NativeAppServiceProvider.php should have been created.

This is where you configure things like application startup settings and application menus.

class NativeAppServiceProvider implements ProvidesPhpIni
{
    public function boot(): void
    {
        // Language menu (English is always the default on app startup)
        // Menu items emit MenuItemClicked events that are handled by JavaScript
        $languageMenu = Menu::make(
            Menu::radio('English', true)->id('change_language_en'),
            Menu::radio('日本語')->id('change_language_ja')
        )->label('Language');

        if (PHP_OS_FAMILY === 'Darwin') {
            // For MacOS
            Menu::create(
                Menu::app(), // MacOS application menu (About xx)
                $languageMenu
            );
        } else {
            Menu::create(
                $languageMenu
            );
        }

        // Window settings on startup (window size, etc.)
        Window::open()
            ->width(1920)
            ->height(1200)
            ->showDevTools(false)
            ->title('File Explorer')
            ->route('explorer.index');
    }

    public function phpIni(): array
    {
        // If you want to override php.ini settings during app runtime,
        // you can configure them here
        return [
        ];
    }
}

Running and Debugging

Run php artisan native:run and your application will launch!

[windows]

[macos]

Wrapping Up

Here's a quick summary:

NativePHP is built on Laravel. Just add the library to your Laravel setup and you're good to go
The native part runs on Electron. You can override the default behavior if needed
You can build for different OS and architectures

It didn't feel like learning a completely new framework - more like an extension of Laravel. That made it really easy to get started.

For this project, I kept things simple with a standard MVC approach, but since you can use Vite and other tools, I'd love to try mixing in SPA or Livewire components next time!

Hey Laravel users — are you using Plural / Singular!?

yone3 — Sat, 25 Oct 2025 07:42:41 +0000

Introduction

Laravel comes packed with tons of handy string manipulation helpers. Among them, Str::plural() and Str::singular() are super useful when you need to follow Laravel's naming conventions for database tables and models!

Today, I'll show you how to use these methods and share some practical examples ✨

Basic Usage

Str::plural() - Converting to Plural Form

Converts singular English words to their plural forms.

use Illuminate\Support\Str;

// Basic examples
Str::plural('user');     // users
Str::plural('person');   // people
Str::plural('child');    // children
Str::plural('ox');       // oxen

Str::singular() - Converting to Singular Form

Converts plural English words to their singular forms.

Str::singular('users');    // user
Str::singular('people');   // person
Str::singular('children'); // child
Str::singular('oxen');     // ox

Practical Examples

1. Dynamic Table Name Generation

$modelName = 'User';
$tableName = Str::plural(Str::snake($modelName));
// Returns 'users'

2. Dynamic Message Generation

$count = 5;
$item = 'item';
$message = "You have {$count} " . Str::plural($item, $count);
// "You have 5 items"

Live Demo

I've created a demo page where you can try it out!

🔗 Singular/Plural Conversion Sample

On this page, you can test singular/plural conversion with various English words.

Specifically, the Controller handles the conversion like this:

$word = $request->input('word');
$singular = \Illuminate\Support\Str::singular($word);
$plural = \Illuminate\Support\Str::plural($word);

Since it's deployed on Render, the first access might take a bit longer to load.

Important Notes

These methods cover basic English pluralization rules, but they don't handle all irregular forms
For more complex conversions, consider using the Illuminate\Support\Pluralizer class directly
If you need custom rules, you can register your own conversion rules in a service provider

Conclusion

Str::plural() and Str::singular() are incredibly useful helper methods when developing with Laravel's conventions. Try using them when dynamically generating table names or messages!

Feel free to try out various words on the demo page! ♪

Simplify Your Laravel Code with Route Model Binding!

yone3 — Wed, 15 Oct 2025 18:13:04 +0000

Hey everyone! Are you using Laravel?

I'm currently working mainly with TypeScript, but I also touch Laravel from time to time.

Checking if data exists after receiving a request is a pretty common scenario. I recently discovered something new (to me at least!), so I wanted to share it with you all.

Traditional Implementation Patterns

Let's say you have a feature that retrieves post information using a post_id and displays the details on the screen.

class PostController extends Controller
{
  public function edit(PostEditRequest $request)
  {
    $detail = Post::where('id', $request->post_id)->first();
    return view('post', ['data' => $detail]);
  }
}

And in the FormRequest:

class PostEditRequest extends FormRequest
{
  public function rules()
  {
    return [
      'post_id' => 'required|exists:posts,id'
    ];
  }
}

Alternatively, you might set up routing like this:

Route::get('/post/{id}', [PostController::class, 'edit']);

And handle it in the controller:

class PostController extends Controller
{
  public function edit(int $id)
  {
    $detail = Post::where('id', $id)->first();
    if (is_null($detail)) {
      // Handle error
    }
    return view('post', ['data' => $detail]);
  }
}

These are pretty standard patterns, right?

What is Route Model Binding?

What I recently learned about is "Route Model Binding" - apparently it's been around for quite a while. (Please don't judge me for not knowing about it! 😅)

With Route Model Binding, you can do this:

Route::get('/post/{post}', [PostController::class, 'edit']);

And in your controller:

class PostController extends Controller
{
  public function edit(Post $post)
  {
    return view('post', ['data' => $post]);
  }
}

By the time your code reaches the controller, you already have an Eloquent Model instance!

Plus, if the ID doesn't exist, Laravel automatically returns a 404 error. How convenient!

Searching by Non-Primary Key Columns

You can also do this:

Route::get('/post/{post:post_uuid}', [PostController::class, 'edit']);

This searches by a different column. If found, the controller processes it; if not, you get a 404.

If you need ID validation but implementing a FormRequest feels like overkill, this approach might be perfect for your use case.

Binding Related Models

Here's a bonus: you can also use Route Model Binding with related data.

For example, let's say you want to retrieve Employee data that belongs to a specific Company:

Route::get('/company/{company}/employee/{employee}', [EmployeeController::class, 'detail'])->scopeBindings();

This ensures you have the employee model that's associated with the company when the controller processes the request.

In your controller:

class EmployeeController extends Controller
{
  public function detail(Company $company, Employee $employee)
  {
    // Do something
  }
}

For this to work, Laravel's Eloquent ORM needs to understand the parent-child relationship. You'll need to define the relationship in your Company model:

class Company extends Model
{
  public function employees(): HasMany
  {
    return $this->hasMany(Employee::class);
  }
}

(There are other ways to establish these relationships, but I'll skip those for now.)

Summary

Route Model Binding gives you a Model instance by the time you reach the controller
- Great for simple implementations where you don't need complex validation
- Automatically returns a 404 error for non-existent data
You can search by columns other than the primary key
Parent-child relationships can be bound using scopeBindings()
- This automatically verifies that the specified employee actually belongs to that company

Choosing Your Approach for Resource Existence Checks

Note: This comparison focuses on how to fetch the resource from the database. Of course, you can still use FormRequest for other validation rules (like validating request parameters) even when using Route Model Binding for fetching the model.

Use FormRequest when: You have complex validation rules or need custom error messages
Use Route Model Binding when: Simple existence checks are sufficient and you want simple code

Wrapping Up

Route Model Binding is simple and incredibly convenient! Laravel still has so many features I haven't discovered yet. I'll share more as I find them!

DEV Community: yone3

How I Added i18n to My Next.js App Router Project

Why next-intl?

File Structure Overview

Define Your Locales ( src/i18n/routing.ts )

Middleware ( src/middleware.ts )

Server-side Request Config ( src/i18n/request.ts )

next.config.ts

Translation Files

Navigation Utilities ( src/i18n/navigation.ts )

The [locale] Layout ( src/app/[locale]/layout.tsx )

Using Translations

Language Switcher Component

Wrapping Up

Tried building a file explorer using NativePHP v2 (nativephp/desktop)

What's NativePHP?

Let's Build Something!

Installation

Time to Code

Running and Debugging

Wrapping Up

Hey Laravel users — are you using Plural / Singular!?

Introduction

Basic Usage

Str::plural() - Converting to Plural Form

Str::singular() - Converting to Singular Form

Practical Examples

1. Dynamic Table Name Generation

2. Dynamic Message Generation

Live Demo

Important Notes

Conclusion

Simplify Your Laravel Code with Route Model Binding!

Traditional Implementation Patterns

What is Route Model Binding?

Searching by Non-Primary Key Columns

Binding Related Models

Summary

Choosing Your Approach for Resource Existence Checks

Wrapping Up

Define Your Locales ( `src/i18n/routing.ts` )

Middleware ( `src/middleware.ts` )

Server-side Request Config ( `src/i18n/request.ts` )

`next.config.ts`

Navigation Utilities ( `src/i18n/navigation.ts` )

The `[locale]` Layout ( `src/app/[locale]/layout.tsx` )