I18n

Introduction I localized and published a Japanese version of the data visualization tool RAWGraphs. https://rawgraphs-ja.vercel.app/ RAWGraphs is an open-source web application that can transform complex data into beautiful visualizations. Without any coding, you can create various charts simply by dragging and dropping CSV or JSON data. What is RAWGraphs? RAWGraphs is a data visualization tool developed by DensityDesign Research Lab in Italy. https://www.rawgraphs.io/ Key features: ...

This article summarizes how to implement language switching without page reload in a multilingual application using Next.js App Router and next-intl. Environment Next.js 16 (App Router) next-intl TypeScript Configuration Overview localePrefix: ‘as-needed’ Using the localePrefix: 'as-needed' setting in next-intl, the default language does not have a URL prefix, while other languages do. Example (when the default language is Japanese): Japanese: /, /gallery, /viewer English: /en, /en/gallery, /en/viewer Implementation Steps 1. Middleware Configuration (Important) next-intl uses middleware to handle locale routing. It is important to configure the matcher so that static files are not redirected by the middleware. ...

This article was reviewed by a human for implementation and written by AI. Overview This template is a starting point for web application development that supports static site generation (SSG) with Next.js 15, with built-in multilingual support and dark mode. It combines TypeScript, Tailwind CSS, next-intl, and next-themes. https://nextjs-i18n-themes-ssg-template.vercel.app/ja/ Key Features 1. Static Site Generation (SSG) Full static export with output: 'export' Fast page loading and SEO optimization Reduced hosting costs 2. Internationalization (i18n) Full multilingual support with next-intl Japanese and English support (easy to add more languages) URL-based language switching (/ja/about, /en/about) Type-safe translation keys 3. Dark Mode System-linked dark mode with next-themes Automatic detection of user preferences Smooth theme switching animation Persistent settings via LocalStorage 4. Improved Developer Experience Type safety with TypeScript Efficient styling with Tailwind CSS Code quality management with ESLint Unified component structure Tech Stack { } " } d e " " " " " " p n r n n t @ e e e e e a t n x a x x i a d t c t t l i e " t - - w l n : " i t i w c : n h n i i " t e d n e ^ " l m c d s 1 ^ " e s c " 5 1 : s s s : . 9 " " s 4 . " : : / { . 1 ^ t 4 . 4 " " y " 0 . ^ ^ p , " 3 0 4 o , . . . g 4 4 1 r " . . a , 6 1 p " 1 h , " y , " : " ^ 0 . 5 . 1 6 " Project Structure s ├ │ │ │ │ │ │ │ ├ │ │ │ │ │ │ │ ├ │ └ r ─ ─ ─ ─ c ─ ─ ─ ─ / a ├ │ │ │ │ ├ └ c ├ │ │ │ │ │ └ i └ m ├ └ p ─ ─ ─ o ─ ─ 1 ─ e ─ ─ p ─ ─ ─ m ─ ─ 8 ─ s ─ ─ / p n s [ ├ ├ ├ └ i s o l ├ ├ ├ ├ └ p / r a e j l ─ ─ ─ ─ c i n a ─ ─ ─ ─ ─ a o g n a o ─ ─ ─ ─ o t e y ─ ─ ─ ─ ─ g u e . . c n e n o e t s j j a l p a e . m t u H F P T T i / s s l a a b x s a s t e o a o n o o e y g o a v p / a o g g g g n n ] e u m g . d t e g g . u . t p t e e L l l t t t / l s r r a e e s . s e . . y T L t x / t t o h a s s s u e n x x x t m g . e u t . a s t g x s e x . # # # t # # # # # # # s F S L x P i T R H A S a i a a 1 r o o b a v t y g 8 a o m o m i e o e n n t e u p c m u - s t l o a t s c l l p e n p p o a a a p c e n t y g a p g o c f i o e g a e m i i o u e g n p f g n t e e o i u r n c r f a e a i t n c t l i t o i e o s m o s n p n o n e n t s Notable Implementations 1. Static Export Support for sitemap.ts e e e } x x x p p p o o r r r t t t I m c c d p o o e l n n f e s s a m t t u e l n d r t t y e a n v f t a a u i m l n o i i c n c d t a i = t o e n ' f = s o i r f t c a e e l m - s a s e p t ; ( a ) t : i c M ' e ; t a d a t a R o u t e . S i t e m a p { 2. Unified Page Layout < P / a b t d < P g r i e Y a e e t s o g L a l c u e a d e r r L y c = i C a o r { p o y u u t t n o t m ( i t u b ' o e t I t n n > t i = t e t { m l t s e ( = ' ' { ) d b } e r s e c a r d i c p r t u i m o b n I ' t ) e } m s } 3. Configuration via Environment Variables # N N E E . X X e T T n _ _ v P P . U U e B B x L L a I I m C C p _ _ l S B e I A T S E E _ _ U P R A L T = H h = t t p : / / l o c a l h o s t : 3 0 0 0 Usage Installation g c n i d p t m n c e i l x n o t s n j t e s a - l [ i l r 1 e 8 p n o - s t i h t e o m r e y s - - u s r s l g ] - t e m p l a t e Development n p m r u n d e v Build n p m r u n b u i l d Customization Points Adding languages: src/i18n/routing.ts and messages/ directory Adding pages: Create new directories under src/app/[locale]/ Theme customization: tailwind.config.js and global CSS Metadata: generateMetadata function in each page Best Practices Component naming: Use PascalCase Translation keys: Organize with nested structure Type safety: Maximize use of TypeScript types Performance: Cache strategy utilizing static generation Summary This template aims to enable quick construction of static sites optimized for SEO, with built-in internationalization and dark mode features. The goal is to improve developer productivity while providing an excellent experience for end users. ...

Overview (Created by ChatGPT) The Nuxt i18n module has a feature that detects the user’s browser language and redirects them to the appropriate language page. However, in certain situations you may want to disable this feature. This article explains how to completely disable browser language detection using detectBrowserLanguage: false. https://v8.i18n.nuxtjs.org/guide/browser-language-detection Configuration To disable the browser language detection feature, set the detectBrowserLanguage option to false in your nuxt.config.js file. e } x ) p i } 1 , r 8 d t そ n e そ の : t の d 他 言 e 他 e の { 語 c の f 設 検 t 設 a 定 出 B 定 u を r l 無 o t 効 w 化 s d e e r f L i a n n e g N u u a x g t e C : o n f f a i l g s ( e { Use Cases Where This Is Helpful When you want users to directly access specific URLs: If you intend for users to directly visit specific content, redirects can be an obstacle. Optimizing crawling: When you want search engine crawlers to be able to directly access specific language pages. Consistent user experience: For example, when you want to avoid unexpected redirects for users navigating between linked language pages. Summary By using detectBrowserLanguage: false, you can control site access for user experience and SEO optimization without relying on redirects. Using this setting in appropriate situations can improve your site’s usability. ...

Introduction This article was generated by GPT-4o. It explains how to build a multilingual static site using Next.js. In particular, it focuses on a configuration where the main language has no URL prefix while other languages have prefixes. It also includes configuration for deploying to GitHub Pages. Project Setup First, create a Next.js project. Initialize the project using create-next-app. n p x c r e a t e - n e x t - a p p @ l a t e s t n e x t - i n t l - s s g Installing Required Packages Install next-intl for multilingual support. ...