Kohei Asai

Kohei Asai

Written on 7/28/2019

I made a SSR-ed personal website with "full" i18n!

Hi, I'm Kohei from Japan and recently moved to Vancouver, Canada. I just made my personal website international because I plan to work here for a long time. As one more reason, it's quite unclear what/how Medium goes, so I will write my blog posts here from now on.

What I did

Using Next.js 9

Since version 9 Next.js supports TypeScript without any configuration. That makes us really comfortable to write TypeScript. That's why I use Next.js for this website and every endpoint is rendered in the server for each request. Before version 9, we need to install additional plugins for Next.js projects to use TypeScript and it requires also to edit .babelrc. But now, even the core of Next.js is written in TypeScript, that sounds Next.js is gradually moving to use TypeScript natively.

Contentful as content backend

This website uses Contentful, which is headless CMS as a content backend. Headless CMS is content management system that is without frontend. You can use it as Web APIs with static site generators such as Gatsby and Hugo, or frontend Web application which is you made by yourself. There's already Wordpress and Ghost have Web API mode in your surroundings. Briefly, this website works like the following diagram:

How this website translate itself

There's only blog posts and a few of profile text is managed there so far, but I plan to store much more data like my works there.

"Full" i18n (I-nternationalizatio-n)

Liturally everything in this website is translated, OGP, linking data (Schema.org) RSS and sitemap as well as text, UI labels and blog posts! These metadata and meta files are served in English if you request it in English, or response is Japanese if you access it in Japanese.

EnglishJapanese
HTTP response in EnglishHTTP response in Japanese

RSS feed preview in Feedly

Screen Shot 2019-07-29 at 16.00.38-optimized

Perfect score at Lighthouse

I tested the website in Lighthouse with the setting "Throttling: Simulated Dast 3G, 4x CPU Slowdown" for both of desktop and mobile, the score is perfect!

DesktopMobile
Perfect score at Lighthouse (desktop)Perfect score at Lighthouse (mobile)

Aug 26th, 2019 Added:

This website is now not always the perfect score due to:

  • Syntax highlighting reduces accessibility score
  • Images reduce performance score
    • Possible to solve using WebP but Safari still doesn't support

What I do next

I started to test Next.js 9 in the beginning and then it results I made this website eventually. I made the place to write, the next task is making habit to write.

Here is the source code. Take a look and star it if you are interested!