What you can do after reading this article

This article is going to talk about how you can add a language-specific URL in your next.js app. For example, will lead you to the English version of the website while will lead you to the Chinese version, etc.

Basic set up reference

First, to set up the feature, I already explain some in my previous articles:

  1. Add a translation feature to your Next.js App Part 1: Set up the
  2. Add a Translation Feature to Your Next.JS App Part 2: Manually Switch Languages

So after you follow those tutorials, I assume that your app is able to grab different scripts…

This article is going to talk about how you can switch languages manually in your next.js app. To set up the feature, you can go back to my previous article. So I assume that your app is able to grab different scripts from corresponding languages scrips already. Also, I built a repo to demonstrate this so feel free to visit there.

Add the Button

First, I am going to use the help of to simply add a button for switching languages. You can run this:

npm install @material-ui/icons @material-ui/core

Then after installing successfully, you can import these components that we will use:

For the past few weeks, I have been working on adding a translation feature to my Next.js App. I don’t see too many tutorials to start with and come across a lot of problems during the process. Therefore, I decided to write down this article for my own reference and hopefully, it can help you too!

If I write everything in one article, it is going to be TOO LONG! So I planned to separate it into a few articles. Here are my plans(I will add a link to it once I finish):

  1. Set up the translation feature with

Static modeling, just like what Sommerville (2015) pointed out, “show(s) the organization of the system design”; dynamic modeling, on the other hand, “shows the organization of the system when it is executing”.

In another word, static modeling models the “fixed” part, which means the different component, their attributes or relationships between different components in the system that is unlikely to change. They are the part that is the fundamental part of a system.

And the dynamic modeling models after the “changing” part, which means how the instances of those components can interact and produce some actions to implement something.


What is Software Static Modeling?

Software Static modeling is that we model how the system of the problem domain is organized, in another word, the structure of the system, which will usually “less likely to change”, according to Gomaa(2011). In addition, he mentions that “a static model defines the classes in the system, the attributes of the classes, the relationships between classes, and the operations of each class”.

What is the purpose of Static Modeling?

Models are built to facilitate understanding of the problem so as to build a solution for it. Static Modeling, compared to the traditional approach where…

When I first see the question, the first answer that comes to me is that functional requirements are more aimed to solve the problem “what does the system do” while the non-functional requirements solve the problem of “how does the system do that”.

For example, in a library application, a functional requirement could be “a user can search a book from inputting a keyword” while a non-functional requirement could be “book search from inputting a keyword should be finished within 3 seconds.”

Sommerville(2015) also points out another difference between them. He mentions non-functional requirements “specify or constrain characteristics of the…

Hey I am back! I know that I disappear for three weeks. That’s because my school starts and also I am getting busier at my work. But from this week on, I will still post every week (hopefully!).

However, the content might change because sometimes I will write down my programming experience just like before, while other times I might write down some thoughts/notes from my software engineering master program courses. The reason that I want to share here is first, it is my way to reflect and digest new knowledge! …

Last week I post a blog about fetch data from the database/API with and . That is going to enable the component to fetch some data every time it is rendered. But what about those global states that would be shared by different components scattered all over the application?

What I usually do in a React app

For example, when we have a user component and we want to pass it to and , what can we do? Since Gatsby is a React framework, I try to compare how I implement it in React. I remember I will use . …

Counterpart to

There are many times where we want to fetch a bunch of data when the component is mounted in React. If you are familiar with class components in React, you know that we can use . With functional components, the counterpart is . And we can use to handle the data fetched from the database or API.


For example, I want to display a lot of neighborhood restaurants data that are just fetched from the database on the homepage.

If we do it the normal way like this:

const homepage = () => {
let restaurants = fetchData()

To build a user authentication system, Firebase UI is a brilliant tool! Once you install and configure it properly(both in your code and in Firebase console), you get 11 beautiful and working UI for signing in automatically, for GCP(Google Cloud Platform) users, you would even have two more ways to enable SAML and OIDC providers.

Install and configure

It is not too hard to start, you can follow the documentation to install, enable the specific provider in Firebase console and configure. …

Yingqi Chen

Web Developer | Ruby | Rails | SQL | Sinatra | React | Redux | HTML&CSS | JavaScript| MERN LinkedIn:

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store