Image for post
Image for post

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 material-UI to simply add a button for switching languages. You can run this:

npm install @material-ui/icons @material-ui/core
import TranslateIcon from "@material-ui/icons/Translate"
import { Button } from…

Part 1: Set up the next-i18next package

Image for post
Image for post

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 plan(I will add a link to it once I finish):

  1. Set up the translation feature with next-i18next package (this…

Image for post
Image for post

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.

From my understanding, a human body is a perfect example of illustrating the difference between these approaches: the whole body is a system, if we draw the structure of body such as eyes, ears, liver, that would be the static model while if we write down the behaviors (how all of these parts interact) such as eating, reading, singing, etc, that is a dynamic model. …

Image for post
Image for post

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 we analyze the problem procedurally(from when an event happens to when an event ends), offers another perspective to view the system that we need to model — structural. Static modeling, together with Dynamic modeling, which Sommerville(2015) says “shows the organization of the system when it is executing”, encourages to see the problem as a whole that is a combination of a few components and their interactions with each other. This type of Object-Oriented(OO) analysis matches our real-life experience and thus easier to understand the problem and look for a solution. …

Image for post
Image for post

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 system as a whole” while functional requirements are “directly concerned with the specific services delivered by the system to its users”. …

Image for post
Image for post

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! …

Image for post
Image for post

Last week I post a blog about fetch data from the database/API with useEffect and useContext. 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 Dashboard and NavBar, 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 Redux. …

Image for post
Image for post

Counterpart to componentdidmount

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 componentdidmount. With functional components, the counterpart is useEffect. And we can use useState 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()

Image for post
Image for post

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. …

Image for post
Image for post

Gatsby is a framework based on React to generate a website faster. So as you can imagine, a lot of problems can be handled in a “React” way. In this article, I am going to talk about how to deal with Gatsby’s state management with React’s context.

What I usually do in React

Usually, if I want to grab a user object on every page in my website, in React, I will use componentDidMount to do that in my App.js like so:

//App.jsclass App extends React.Component …


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