DEV Community

Cover image for Created Frontend Tools Showcase site with Next.js & Contentful

Posted on

Created Frontend Tools Showcase site with Next.js & Contentful

I created a simple web site with Next.js and Contentful.

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 
Enter fullscreen mode Exit fullscreen mode

without stylesheet

- component_name
  - index.js
Enter fullscreen mode Exit fullscreen mode

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.

GitHub logo contentful / contentful.js

JavaScript library for Contentful's Delivery API (node & browser)

Contentful Logo

Content Delivery API


Readme · Migration · Advanced · TypeScript · Contributing

Join Contentful Community Slack


MIT License Build Status NPM jsDelivr Hits NPM downloads GZIP bundle size

JavaScript library for the Contentful Content Delivery API and Content Preview API. It helps you to easily access your content stored in Contentful with your JavaScript applications.

What is Contentful?

Contentful provides content infrastructure for digital teams to power websites, apps, and devices. Unlike a CMS, Contentful was built to integrate with the modern software stack. It offers a central hub for structured content, powerful management and delivery APIs, and a customizable web app that enables developers and content creators to ship their products faster.

Table of contents

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.


The following is the current score.

Alt Text

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


This app is using Vercel( 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.


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.

GitHub logo koji / frontend-tools

listed tools for webdev (focus on frontend)



how to run

  • clone this repo
  • install packages
  • run dev server

requirements: nodejs and yarn/npm

$ git clone
$ 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
Enter fullscreen mode Exit fullscreen mode

open http://localhost:3000 with a browser.


Oldest comments (0)