Language Switcher (Dropdown) in Next.js | i18n w/ next-intl & App Router

preview_player
Показать описание


00:00 Language Switcher Demo
00:44 Setup Overview with next-intl
04:14 Handling of the Locale (Locale Cookie)
06:03 Language Switcher Component
07:45 Bonus: Colocating i18n Files for Better Organization
  1. Lucas Barake
Рекомендации по теме
Language Switcher (Dropdown) 0:09:47

Language Switcher (Dropdown) in Next.js | i18n w/ next-intl & App Router

Internationalization in NextJs 0:28:40

Internationalization in NextJs 14 with Next-Intl | i18n

Next.js i18n: App 0:10:04

Next.js i18n: App Router + next-intl Tutorial

React multi-language tutorial 0:04:32

React multi-language tutorial

Next.js 15 Multiple 0:28:10

Next.js 15 Multiple Languages in 2024 | i18n + Zod Error Translation Guide

React Multi Language 0:30:01

React Multi Language App - i18next Tutorial with React JS

Translating a Next 0:08:57

Translating a Next Js Website (App Router i18n)

React Localization with 0:11:13

React Localization with i18next | Add Multi-Language Support in React

Add Multi Language 0:34:19

Add Multi Language Support in Next.js 15 Project

React Multi Language 0:38:35

React Multi Language App - i18next Tutorial

Internationalization (i18n) with 0:09:16

Internationalization (i18n) with Next.js!

Make a Dropdown 0:03:29

Make a Dropdown Menu in React JS | Beginner Tutorial

How are Multi 0:00:56

How are Multi Language Websites made? #reactjs #javascript

Next.js App Directory 0:22:09

Next.js App Directory & i18n - Full Tutorial

Multiple language (switcher 0:44:12

Multiple language (switcher language) - Reactjs Typescript

Google Translate API 0:04:42

Google Translate API - Adding Multiple Language Translation Feature to Your Website

How To Use 0:03:21

How To Use React Flags Select In React | React Country Flag Select

Next.js - Multi 0:34:09

Next.js - Multi Language

Advanced Dropdown Menu 0:16:52

Advanced Dropdown Menu - React & CSS Animation Tutorial for Beginners

Multi-Language Translation in 2:52:04

Multi-Language Translation in Next.js: App router with next-intl & i18n

React Native Multi 0:14:34

React Native Multi Language App Using i18next

04-02: Languages dropdown 0:09:33

04-02: Languages dropdown menu function

Custom Dropdown Select 0:14:16

Custom Dropdown Select Menu in HTML CSS & JavaScript

Next.js + Strapi 0:19:08

Next.js + Strapi - #Internationalization (i18n)

Комментарии
Автор

Thanks Lucas i really appreciate your work

maksabagency
Автор

thank you so much bro, helped me alot. keep up the good work👍

Kai-enxs
Автор

Hey! This is a really useful video, no bs, thanks!
My only concern is that some of my animations are being re-triggered when the page refresh happens.
I assume that is more of a framer-motion config issue than your implementation's but I'd like to ask if you had faced anything similar? (For example: on top of the page I have a full width navbar, and scrolling down it becomes a floating navbar with reduced width, this animation is being triggered when changing the language, this looks clunky.)

kristoth
Автор

Hey could u please include clerk into middleware

zqgAFf
Автор

Could you please share this demo git repo? I am getting issues while creating aboutus and contact page. How to do navigation?

mohdsahil
Автор

With this setup seo will not work right

kushalmalviya
Автор

I have an quesiton about SEO. You use "never", but is it good idea for google seo? How can i provide then links for different languages eg. es, en-us etc. In my opionion there is a need to have a locale in url if we want use page with seo. Am i right?

guineapigtaco
Автор

i dont understand why react developers love to make things harder lol

codecret