DEV Community: Craciun Ciprian

Translate your next js project with next-translate

Craciun Ciprian — Wed, 28 Jul 2021 18:31:08 +0000

Do you have a next js application and do you need multiple languages? Let's start to explain how to translate your next js project with next-translate.

The first step is to decide which approach is the best for your next js project. There are two main tasks you need to handle:

manage JSON locales
maintain separate URLs

Starting with version 10.0.0 Next js has built-in support for internationalized routing and he comes with two proposals:
Sub-path Routing and Domain Routing. If you like to read more about these two technics check the official link. In our tutorial, we will use sub-path routing, so let's start!

Start with configurations

First of all, we need a next-translate package, install it with npm install next-translate, create an i18n JSON file in the root of the project and add your languages, check my example from the image, I will use stackblitz to create this tutorial and I will add the link of the project at the end of the article.

I added few things in the i18n file, locales it's an array with the languages you want to have in your project, in my case "ro" it's for Romanian and "en" it's for English. I set up defaultLocale to "ro" to be the default language for my project, you can set it to be your native language.

As a small observation is to check which language is set on the browser, the project will be translated first time in the browser language.

The last thing from the i18n file is pages, an array that contains the name of files with the translations for each page. I this tutorial I added just one file common to have the same examples.

Create locales folder in the root of the project with languages you set up in the i18n file and also add next-translate package to next.config.js

const nextTranslate = require('next-translate');
module.exports = nextTranslate();

If you already have configurations in your next.config.js file you need to wrap all the configurations into next-translate module:

const nextTranslate = require("next-translate");
module.exports = nextTranslate({
  env: {
    REACT_APP_API: "http://localhost:3000",
  },
  eslint: {
    ignoreDuringBuilds: true,
  }
});

To summarize, add i18n.json file in the root of the project with your configurations and install next-translate package, create locales folder with languages and add common file name as JSON and import next-translate into next-config.js in order to load all configurations.

Translate pages

In our common.json file, we need to add some attributes, for example, if we decide to translate our title we should add it in both places locales/en and locales/ro:

// en
{
  "title": "Welcome to our translated page"
}

// ro
{
  "title": "Bine ati venit"
}

The next step we should do is to get our translated title on the Home page (any other component):

import useTranslation from 'next-translate/useTranslation';

//use into component
const { t, lang } = useTranslation('common');
const title = t('title');

Create language switch component ( bonus )

I've create also a component for switching our language, we set up the name of languages in common.json files, and then we can extract them in the component.

I used react-bootstrap to create the dropdown, you can use any other UI framework or you can build your own dropdown.

import React from 'react';
import { Dropdown, DropdownButton } from 'react-bootstrap';
import i18nConfig from '../../i18n.json';
import useTranslation from 'next-translate/useTranslation';
import Link from 'next/link';

const SwitchLanguage = () => {
  const { locales, defaultLocale } = i18nConfig;
  const { t, lang } = useTranslation('common');

  return (
    <div>
      <DropdownButton id="dropdown-basic-button" title="Switch Lang">
        {locales.map(lng => {
          if (lng === lang) return null;
          return (
            <Dropdown.Item key={lng}>
              <Link href="/" locale={lng} key={lng}>
                {t(`common:language-name-${lng}`)}
              </Link>
            </Dropdown.Item>
          );
        })}
      </DropdownButton>
    </div>
  );
};

export default SwitchLanguage;

You can find the original article and stackblitz demo here.

How to manage your package JSON file with npm

Craciun Ciprian — Tue, 13 Jul 2021 11:01:33 +0000

We are using every day npm package and sometimes we forgot to check the latest updates from the package JSON file so how we update this file with npm?

The best approach for a front-end project is always to have the latest packages updated. Why? You are up to date with the latest technologies and also you can prevent problems related to security.

Use npm outdated

If we run npm outdated command in the root of the project, for a project with a package JSON file, we can see how many npm packages require updates.

Run npm update

Running npm update will auto-update packages without the need to update them manually.

Before running npm update if you have some packages that don't need updates or maybe it's a package with some deprecations, no longer maintained by the author, you can change the version of the package to be fixed like this: "next": "^10.2.3" → "next": "10.2.3".

Removing the "^" from the package version, we set a fixed version and when we run npm update that package will not be updated to the next version.

Scan your project for vulnerabilities with npm audit

Yes, we can audit our packages running npm audit, this will tell you if you have any vulnerabilities and what to do to fix them.

Read carefully all the pieces of information from the report, some suggestions may not be a fit for your project.

The last command you should run after report review is npm audit fix, this will automatically update all the broken packages. Other options for npm audit can be found on the official docs.

From my point of view, this would be a good behavior to have as a Developer, check your packages because when you code new features it's easy just to add packages without checking for vulnerabilities.

If you like what I suggested here you can follow me on Twitter or subscribe to my newsletter.

The original article can be found on my personal blog.

Generate meta tags in react js for sharing

Craciun Ciprian — Fri, 05 Feb 2021 10:14:37 +0000

If you are building websites using react js with create-react-app it's great but we have a problem with meta tags.

Suppose you have a blog on your react js web application and you want to share your article to get more visibility, the problem is Facebook, LinkedIn and Twitter doesn't recognize your meta tags because of your index.html file from the build.

In order to have a great preview when you share an article, Facebook and LinkedIn need to have in the header of the page open graph meta tags:

<meta property="og:title" content="" />
<meta property="og:url" content="" />
<meta property="og:type" content="article" />
<meta property="og:description" content="" />
<meta property="og:image" content="" />

For Twitter we need to have another set of meta tags:

<meta property="twitter:title" content="" />
<meta property="twitter:description" content="" />
<meta property="twitter:image" content="" />
<meta property="twitter:card" content="" />

After the above meta tags are present in your article you can check how the preview share will look using the official debuggers: Facebook debugger, Linkedin debugger, and Twitter debugger.

How to fix meta tags in our react js app?

The only good solution would be to serve those meta tags server-side. As the official documentation suggests you can place some placeholders in the index.html file and every time you change the page the server would fill those placeholders with the right words, as an example, meta tags should look something like this:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta property="og:title" content="__OG_TITLE__" />
 <meta property="og:description" content="__OG_DESCRIPTION__" />
 <meta property="og:url" content="__OG_URL__" />
 <meta property="og:image" content="__OG_IMAGE__" />
</head>
</html>

Use an external library

There is a lot of discussions about using react-helmet, yes is very easy to use and to update your meta tags from a component instead of changing from the index.html file.

Depends on the content of your website and what purpose should serve, in my case because I worked on a blog website the best solution was to serve those meta tags from the server.

Don't forget to use those official tools from Facebook, LinkedIn, and Twitter they help a lot.

If you like what I suggested here you can follow me on Twitter or subscribe to my newsletter.

The original article can be found on my blog

Old website, new design

Craciun Ciprian — Sat, 02 Jan 2021 13:31:25 +0000

I'm using WordPress for the website and I added this year(2021) a new design on it. Is still WordPress a good choice in 2021 ? I would love to have some feedback about WordPress, design and the blog part.

Website: https://stefaniq.com/
My twitter: https://twitter.com/StefanCraciun5

Thank you!