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.
Article No Longer Available
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.
contentful
/
contentful.js
JavaScript library for Contentful's Delivery API (node & browser)
Content Delivery API
Javascript
Readme · Migration · Advanced · TypeScript · Contributing
Introduction
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.
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.
koji
/
frontend-tools
listed tools for webdev (focus on frontend)
FE-tools
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)