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.
Article No Longer Available
Actually, Next.js+Contentful reduced the time to update the information.
Next.js structure Component
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
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.
- component_name - index.js - component_name.module.css
- component_name - index.js
Next.js structure Pages
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.
contentful / contentful.js
Content Delivery API
Readme · Migration · Advanced · TypeScript · Contributing
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.
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(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
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.
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 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
open http://localhost:3000 with a browser.
Top comments (0)