Static site with Next.js, Contentful & Netlify

TL;DR

Code: https://github.com/itiden/itiden.se/tree/blog (blog branch)
Result: https://itiden.se (yeah, it's in Swedish, sorry...)

Edit 2020-02-17:
The webpage has been updated. It no longer use as much of Contentful as before. Check out the blog bransch for the code referenced in this blog posts.

Disclaimer

This is a guide to copy our open sourced website. You will be able to setup Contentful with some dummy content. But make sure you see it as a template for your site. To be able to edit the site knowledge about Next.js / React is required.

Feel free to ask any questions but the idea is to make it easy for you to test Contentful hosted on Netlify with a site developed in React.

The stack

So, at itiden we wanted a site where we would use Contentful as a "cloud CMS" and to host it on Netlify.

Since we have previous experience with Next.js (React) we decided to use it when building the page.

It's written in Typescript and we are using Tailwind as a "CSS framework" with Styled Components as the "CSS in JS" library.

The code is open sourced on Github (https://github.com/itiden/itiden.se) and you can feel free to clone it and use it as a template for your own website

Setup the project

Start by creating you own copy of the repo by clicking "Use this template" button on https://github.com/itiden/itiden.se

When you have your repo, clone it and copy the .env.example to .env and run yarn.

cp .env.example .env
yarn

Now you need to setup Contentful to be able to fetch some content.
Create a new account if you don't have one already. After that you will need to create a empty space.

Your should now be on a screen where you are asked to add your first content type.

When your at that screen, install Contentful CLI by running npm install -g contentful-cli.
Start by logging it to your account by running contentful login.
If successful you will receive a token that will be saved on your computer.

Now you need to import some content types and content. There is a contentful-export.json file in the repo.

Run:
contentful space import --space-id <your space id> --content-file contentful-export.json

You can find your space id in the URL on contentful:
https://app.contentful.com/spaces/space_id/home

Now reload the contentful page and click the "Use the Api" button.
On this page, copy the space id and Content Delivery API - access token to your .env file:

CONTENTFUL_SPACE=<space id>
CONTENTFUL_TOKEN=<access token>

You can now run yarn getcontent to fetch the content from Contenful and then yarn dev to start your development server.

Goto http://localhost:3000/!

Content models

Read about Content Models here:
https://www.contentful.com/r/knowledgebase/content-modelling-basics/

The following Contentful Content models have now been created in your space. The explanations are for how we are using them, but its up to you to use them like you want.

Menu
Currently there is only one Menu entry and that is the main top Menu.
The main menu contains Menu Item. Notice, the first menu item, named "Case" does not have an Menu Item. It is hard-coded in the front-end.

Menu Item
A menu item have a Label and a reference to a Page

Page
A page has a Title, Slug (used for generating the URL), Description, Header and Body. Header and Body are "Rich text" field where you can add Entries. Currently the only Entry that will be rendered in the front-end is the Employee content model. Notice: the first page / is hard coded to display Case content.

Employee
These contents can be added to the Body field of an Page.

Case
Case content is listed on the first page. They also receive the url /case/.

Category / Technology / Partner
These are all content that is added to a Case.

Building static files

The config for what pages that should be exported to static pages exists in the next.config.js file.

See:
https://github.com/itiden/itiden.se/blob/353817c013092470b4548603fa3114aa55e69093/next.config.js#L14

To create the static files, run yarn build.
All created files will be exported to an out folder.

Netlify hosting

Create a account on Netlify if needed. Then start a new site based on your github repo.

When asked, set "Build command" to yarn build and "Output directory" to out.

Go to Settings / Build & deploy / Environment.

Edit Environment and add the rows from your .env file.
CONTENTFUL_SPACE=
CONTENTFUL_TOKEN=

Go to Deploys and Trigger deploy.

You have now received an Netlify URL for your site. Something like https://strange_text.netlify.com/

Next step will probably be to setup Custom Domains and HTTPS

You now have a statically created serverless hosted React site!

Trigger Rebuilds from Contenful

In the top menu on Contenful, click Apps.
Install Netlify app and connect your account.
Then select the site you created.

When editing your content, your now have a "Build" button and an "Open preview" button to build your site on Netlify.

Google Analytics

To add Google Analytics, just add your tracking ID to your .env and/or your Environment variables on Netlify.

CONTENTFUL_SPACE=<space id>
CONTENTFUL_TOKEN=<access token>
GA=<tracking ID>

Comments

[ruhaise]

there is a small typo in the importing of content type and content,
contenful is missing in the begining, it should be

contenful space import --space-id <your space id> --content-file contentful-export.json

:)

[Andreas Bergqvist]

Fixed! Thanks 😁

[Mark Anthony B. Dungo]

Whenever I created this ".env" file:

VARIABLE_NAME=variableName

And access it with process.env.VARIABLE_NAME, I'm getting undefined variable.