Next.js presents a challenge with double-language applications

I am currently in the process of developing a web application using Next.js that will cater to users who speak my native language and English. I have a specific approach in mind:

  1. First, I plan to create a folder: /pages/en-us
pages/
|--(all app pages)
|--en-us/
   |--(all app pages like above)
  1. Next, I intend to wrap the entire application with a LanguageContext. Additionally, I will implement a middleware function to detect the visitor's country based on their IP address upon loading the page. If the visitor is from a foreign country or if the current language is set to English, they will be redirected to the /en-us path.
    For instance, /login would redirect to /en-us/login.

While I am aware of frameworks such as i18next for multi-language support, I believe my web application only requires support for two languages and may not necessitate the use of such frameworks.

Do you think my approach is suitable? If not, I welcome any advice or recommendations.

javascriptnext.js

Answer №1

If you're looking for a way to streamline your code and avoid duplications when working with language files, I suggest integrating i18next into your project. This will allow you to make changes more efficiently without having to repeat code. One interesting approach is using the Navigator.language property to automatically detect the user's preferred language. The Navigator.language property provides information about the user's browser UI language. I hope this suggestion proves helpful in optimizing your project. Best of luck!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The import 'react-router' does not include an export called 'browserHistory'. This issue is coming from the /src/App.js file

I've recently started diving into the routing section of learning react, but I'm a bit puzzled by the error message I encountered. Error: Failed to compile ./src/App.js 31:19-33 'react-router' does not contain an export named 'bro ...

javascriptreactjs

Ways to invoke a class method by clicking on it

My initialization function is defined as follows: init: function() { $("#editRow").click(function() { <code> } $(".removeRow").click(function() { <code> } } I am trying to find a way to call the class method removeRow directly in the onc ...

javascriptjquerytreegrid

Using Jquery to Create a Dropdown Menu for Google Accounts

Is there a way to create a menu like Google's user account menu using jQuery or Javascript? You can find an example of this dropdown menu on the top right corner when logged in to Google. See the image below for reference. ...

javascriptjquerymenudrop-down-menu

When integrating the React custom hook setValue into another component, it appears to be returning an undefined

I have created a custom useLocalStorage hook. When I directly use it in my component and try to update the value, I encounter an error stating that setValue is not a function and is actually undefined. Here's the code snippet: // Link to the original ...

javascriptreactjsreact-hooks

What is the best way to extract all "conditions" nested under the key "logic" at the 0th index in a JSON object?

I need to manipulate a nested object by removing every "condition" where the key is "logic" and the value is 0 from it. Here is an example of the object structure: Original input: [ { "conditions": [ { "logic": "AND", "paramet ...

javascriptarraysjsonreactjsloops

Automatic Expansion Feature for HTML Tables

http://jsfiddle.net/bzL7p87k/ In my table, placeholders are filled with special words. However, what happens when I have more than 4 rows? For instance, if there are 21 placeholders for 21 rows? What I mean is this: I only have one row with a placeholder ...

javascriptjqueryhtmlmysqlcss

What is the best source for retrieving data - my database, an open api, or JSON files?

For my novice portfolio, I am creating a Pokemon team builder app. With over 800 unique Pokemon to choose from, each with its own abilities and moves, the project requires substantial data. Luckily, there is a free online api known as PokeAPI that provides ...

reactjsjsonnext.js

When trying to reference a vanilla JavaScript file in TypeScript, encountering the issue of the file not being recognized

I have been attempting to import a file into TypeScript that resembles a typical js file intended for use in a script tag. Despite my efforts, I have not found success with various methods. // global.d.ts declare module 'myfile.js' Within the re ...

javascriptreactjstypescriptreact-typescript

How to reference an object from an external file in TypeScript using Ionic 2 and Angular 2

I am currently developing a mobile application with Ionic2 and have integrated a simple online payment service called Paystack for processing payments. The way it operates is by adding a js file to your webpage and then invoking a function. <script> ...

javascriptangulartypescriptionic2

What could be the reason for the esm loader not recognizing my import?

Running a small express server and encountering an issue in my bin/www.ts where I import my app.ts file like so: import app from '../app'; After building the project into JavaScript using: tsc --project ./ and running it with nodemon ./build/bin ...

javascripttypescriptexpressnode-modules

Obtain the registration ID for Android to enable push notifications by utilizing PushSharp

I am currently utilizing the PushSharp library and have come across deviceToken in the sample code provided on this link. Could someone kindly assist me on how to obtain this deviceToken? The PushSharp sample code does not clearly explain this. apnsBrok ...

javascriptasp.net-web-apigoogle-cloud-messagingpushsharp

Using TypeScript to filter and compare two arrays based on a specific condition

Can someone help me with filtering certain attributes using another array? If a condition is met, I would like to return other attributes. Here's an example: Array1 = [{offenceCode: 'JLN14', offenceDesc:'Speeding'}] Array2 = [{id ...

javascriptangulartypescript

Interpret data from an external JSON file into a HighCharts chart using JavaScript

Currently, I am exploring the process of incorporating HighCharts Chart data directly within the actual webpage. Below is the complete code snippet: <!DOCTYPE html> <html><head> <script type="text/javascript" src="http://code.jquery. ...

javascriptjsonhighcharts

Validating Inputs with an Array of Values in my Angular 2 Application

I have been exploring ways to retrieve data from an array of values instead of a single value when using [(ngModel)] binding in my Angular 2 application. The current setup functions perfectly with a single value, as shown below. The data is pulled from the ...

javascriptangulartypescript

Encountering a series of frustrating 404 errors when attempting to submit a React form multiple times

I've been working on developing a new forum using Express and React, but I'm facing challenges with saving form data to the database. Currently, my goal is to store topic titles in a MongoDB collection, with plans to expand to include message con ...

javascriptreactjsexpress

Blocking the space bar in JavaScript is a useful technique that can be

I'm in the process of developing an application and I'm looking to prevent the space bar from scrolling my page My framework of choice is VUE, and I am trying to trigger a method using an event handler However, when I attempt to call the ' ...

javascriptvue.js

Error encountered while trying to import the Turborepo UI package into Next.js: It appears that an appropriate loader may be required

Currently, I am working on a project using next.js 13.1.1 and setting up a monoRepo-based project with turborepo for the first time. My goal is to incorporate: @next/bundle-analyzer @sentry/nextjs @next-pwa When these configurations are not used, everyth ...

reactjsnext.jsprogressive-web-appsturborepo

Obtaining a URL from a parameter

I have a unique situation with one of my parameters in the routing, as it involves an actual URL. router.get('/api/sitemap/:url', function(req, res) { var url = req.params.url; ... } How can I ensure t ...

javascriptnode.js

Updating and showing a variable in a PHP file using JavaScript within an HTML webpage

My goal is to establish a variable in a PHP file on my server named "likes." Subsequently, I wish to incorporate a like button on my HTML webpage that, when clicked, will utilize JavaScript to modify the "likes" variable in the PHP file and increase it by ...

javascriptphphtmlvariables

Encountering a Next.js 404 Error while trying to access a dynamic route despite having the correct

I am experiencing a 404 error (This page could not be found.) when attempting to access a dynamic route in my current Next.js project. The specific URL is http://localhost:3000/blog/id, and I have already updated to the latest version of Next.js. Here is ...

next.jsfrontend