I created a simple web site with Next.js and Contentful.
https://fetools.vercel.app/

What is Next.js?

Next.js is an open-source development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites.

What is Contentful?

Contentful is the platform where you can update the content of your website, a mobile app or any other platform that displays content. We save you the time and hassle to create your own backend to manage the content, and provide many tools which make it easier to actually generate a website or app.

In fact, for this simple application, I don't need to use Contentful but I'm planing to create another application with Contentful so this is a kind of test lol.
And also I wanted to make this article's update easy.

Actually, Next.js+Contentful reduced the time to update the information.

Next.js structure Component

I used create-next-app to create a base project without TypeScript. Then created src folder under the root and moved all javescript files (without settings ex: next.config.js) to src folder.
After that I created component folder. Each component uses the following structure. A couple of component don't have a css file such as PageSEO component since it has only meta tags which don't need any styles.

with stylesheet

- component_name
  - index.js
  - component_name.module.css 

without stylesheet

- component_name
  - index.js

Next.js structure Pages

The Pages folder structure is also very simple since it has index page and 404 page only.
_document.tsx is for SEO (especially, Google Analytics).

For this simple application's key is index.tsx since I call Contentful API from there. However, fetching data isn't difficult since Contentful offers their own library.

Right now I'm using getServerSideProps which is SSR. But for this type of a web application, SSG would be better since I don't need to update site until I add a new site/app to Contentful.

Lighthouse

The following is the current score.

Basically, we don't need to do something special since Next.js is optimized very well so all scores are basically more than 80.

Hosting

This app is using Vercel(https://vercel.com/) because Next.js is from Vercel and in terms of build time, Vercel was faster than Netlify. This app is using environment variables for Contentful CONTENTFUL_SPACE_ID, CONTENTFUL_ACCESS_TOKEN.

TypeScript

Right now I'm using TypeScript(not enough lol since there are a couple of any lol). I think I had to use TypeScript when I created a base project since introducing TypeScript from half way through since I needed to update eslint settings that were really annoying.

The repo is here.

$ git clone https://github.com/koji/frontend-tools.git
$ cd frontend-tools

# yarn or npm for installing packages
$ yarn
$ npm i / npm install

# yarn or npm for running dev server
$ yarn dev
$ npm run dev