14 Jun 2022

How to create blog using NextJS?

Are you going to create a blog? Or maybe would you like to start using magic Flotiq with NextJS? If you answer yes on any question, keep going reading our tutorial. You will learn how to create a new project step by step.

7 min read

2. What technologies will be useful?

3. Flotiq Content definition

4. What components do we need to create?

5. Let’s connect our components to Layouts/Templates

6. Routings - Create Pages

Summary

Hi! Today we want to show how to create a simple blog using our NextJS boilerplate. We will cover essential steps and provide code examples. Finally, we share the result as a ready to use NextJS blog starter.

1. What is NextJS?

React is a library for creating user interfaces. NextJS is a framework designed for facilitating the creation of such interfaces. For example, this tool gives a routing system based on files and CSS support.

2. What technologies will be useful?

Of course, we want to use Flotiq as our base and place to manage our content. We want to create the frontend (visual) part in this tutorial.

You should have a basic knowledge of:

But let’s show something in details

3. Flotiq Content definition

In this article, we rely on the predefined Blog post Content Type Definition. You can create it simply from the Flotiq dashboard:

In this step you can also add a example posts to the newly created Blog Post Content Type.

Note: To create Content Type Definitions with example data in your account, you can also use the Flotiq CLI approach. Download the data from the .flotiq directory in the starter repository, and use the flotiq import command.

4. What components do we need to create?

Our blog will be composed of small elements that we will be able to reuse later. Components list in our blog:

But components aren’t everything. We should use some layouts. About that, in the next paragraph.

5. Let’s connect our components to Layouts/Templates

In our example, we want to create two things: A blog post layout and a basic template. Let’s start with a basic template because this will depend on all our pages.

import React from 'react';
import Head from 'next/head';
import Header from '../components/Header';
import Footer from '../components/Footer';

const Layout = ({ children, additionalClass = [], title, description }) => (
    <main className={['font-sora', 'px-4', ...additionalClass].join(' ')}>
        <Head>
            <title>{title}</title>
            <meta name="viewport" content="initial-scale=1.0, width=device-width" />
            <meta property="og:title" content={title} key="title" />
            <meta name="description" content={description} />
        </Head>
        <Header />
        {children}
        <Footer />
    </main>
);
export default Layout;

It’s a simple file containing our Header, footer, and Head HTML tag to display the title in the browser. The important thing there is {children} - where we put this element, there will be rendered all children components (our components, pages content)

Second, as mentioned, we should have a blog post layout. To create this, we should have some components defined before in our article and some from the flotiq-components-react package: Header, Content, BlogPostFeaturedImage, BlogPostAuthor, BlogPostMetaDetails and BlogPostNavigation. Of course, we cannot forget about the Layout defined in this section.

import React from 'react';
import moment from 'moment';
import { Content, Header } from 'flotiq-components-react';
import Layout from '../layouts/layout';
import BlogPostFeaturedImage from '../components/blog-post/BlogPostFeaturedImage';
import BlogPostAuthor from '../components/blog-post/BlogPostAuthor';
import BlogPostMetaDetails from '../components/blog-post/BlogPostMetaDetails';
import BlogPostNavigation from '../components/blog-post/BlogPostNavigation';
import config from '../lib/config';

const BlogPostTemplate = ({ post, pageContext }) => (
    <Layout
        title={`${config.siteMetadata.title} | ${post.title}`}
        description={post.excerpt}
        additionalClass={['bg-white px-6']}
    >
        <article className="max-w-7xl mx-auto mt-20 pb-4 rounded-2xl bg-light-gray overflow-hidden">
            {(post.headerImage && post.headerImage[0].dataUrl) && (
                <BlogPostFeaturedImage headerImage={post.headerImage} title={post.title} />
            )}

            <BlogPostMetaDetails
                date={moment(post.internal.createdAt).format(' Do MMMM yyyy')}
                readingTime=" 7 min"
                tags={['#photo', '#cookig', '#food']}
                additionalClass={['py-6']}
            />

            <Header alignement="center" additionalClasses={['px-4 md:px-12 pt-10 pb-10']}>
                {post.title}
            </Header>

            <Content
                blocks={post.content.blocks}
                additionalClasses={['px-4 md:px-12 text-sm md:text-lg']}
                fileProps={{
                    audioProps: { additionalClasses: ['px-6 md:px-12 w-full md:w-3/5 mx-auto'] },
                    imageProps: {
                        additionalClasses: ['w-full md:w-9/12 m-auto'],
                        rounded: '3xl',
                        captionAdditionalClasses: ['w-full md:w-9/12 m-auto'],
                    },
                }}
                quoteProps={
                    {
                        variant: 'dark',
                        additionalClasses: ['px-12 md:px-28 py-4'],
                        captionAdditionalClasses: ['bg-primary rounded px-8 py-1.5 opacity-100'],
                    }
                }
                paragraphProps={{ additionalClasses: ['font-light'] }}
            />
            <BlogPostAuthor authorName=" John Doe" additionalClass={['py-5']} />
        </article>
        <BlogPostNavigation
            additionalClass={['mt-3']}
            prevText="Previous post"
            nextText="Next post"
            pageContext={pageContext}
        />
    </Layout>
);
export default BlogPostTemplate;

Now we have prepared to create pages :)

6. Routings - Create Pages

First of all, we should bring closer to the routing system in NextJS - it depends on files. In the pages directory, we can create, for example, 404.js, but we can create a file named [page].js - it’s a page which gets the page parameter from the URL.

We must depend on two functions: getStaticProps and getStaticPaths. In the second one, we can save our logic to generate pages in this example, depending on pagination. In the first one, we should prepare data for each page. Of course, we should define components to render our data in the same file.

import Pagination from 'flotiq-components-react/dist/components/Pagination/Pagination';
import React from 'react';import Layout from '../layouts/layout';
import Announcement from '../components/Announcement';
import { getBlogPosts } from '../lib/blogPosts';
import BlogCards from '../sections/BlogCards';
import config from '../lib/config';

const Home = ({ posts, pageContext }) => (
    <Layout
        title={config.siteMetadata.title}
        description={config.siteMetadata.description}
        additionalClass={['bg-light-gray']}
    >
        <Announcement
            content="This is the Blog where you can find any kind of information and rich media content.
                Use it for your needs, add content and customize in any way"
        />
        <BlogCards posts={posts} />
        {pageContext.numPages > 1 && (
            <Pagination page={pageContext.currentPage} numOfPages={pageContext.numPages} rounded="md" />
        )}
    </Layout>);

export async function getStaticProps({ params }) {
    const fetchPost = await getBlogPosts(params.page, config.blog.postPerPage);
    return {
        props: {
            posts: fetchPost.data,
            pageContext: {
                currentPage: params.page,
                numPages: fetchPost.total_pages,
            },
        },
    };
}

export async function getStaticPaths() {
    const fetcher = await getBlogPosts(1, config.blog.postPerPage);
    const pages = fetcher.total_pages;
    const pathRule = (number) => `${number + 1}`;
    let paths = {};
    if (pages > 1) {
        paths = Array.from(Array(pages - 1).keys()).map((i) => ({
            params: { page: pathRule(i) },
        }));
    } else {
        paths = Array.from(Array(pages).keys()).map((i) => ({
            params: { page: pathRule(i) },
        }));
    }
    return {
        paths,
        fallback: false,
    };
}

export default Home;

We cannot create a few pages that require generation like this on the same level. We should create a new directory for our posts. Let’s create the page to generate our posts by slug. Of course, we should name our file as [slug].js

import React from "react";
import BlogPostTemplate from "../../templates/blog-post";
import {
  getBlogPostBySlug,
  getBlogPosts,
  getNextBlogPost,
  getPreviousBlogPost,
} from "../../lib/blogPosts";

const Home = ({ post, pageContext }) => (
  <BlogPostTemplate
    post={post}
    pageContext={{
      pageContext,
    }}
  />
);

export async function getStaticProps({ params }) {
  const postBySlug = await getBlogPostBySlug(params.slug);
  const createdAt = postBySlug?.data[0]?.internal.createdAt;
  const previousPost = await getPreviousBlogPost(createdAt || null);
  const previousPostSlug =
    previousPost && previousPost.data && previousPost.data[0]
      ? previousPost.data[0].slug
      : null;
  const nextPost = await getNextBlogPost(createdAt || null);
  const nextPostSlug =
    nextPost && nextPost.data && nextPost.data[0]
      ? nextPost.data[0].slug
      : null;

  return {
    props: {
      post: postBySlug.data[0],
      pageContext: {
        previous: previousPostSlug,
        next: nextPostSlug,
      },
    },
  };
}

export async function getStaticPaths() {
  const posts = await getBlogPosts(1, 10000);
  const postData = posts.data;

  return {
    paths: postData.map((post) => ({
      params: {
        slug: post.slug,
      },
    })),
    fallback: false,
  };
}

export default Home;

Summary

Now we have a functional blog using NextJS and Flotiq HeadLess CMS :). Of course, we should build it and deploy it to any cloud service/hosting in the next step, but it’s not part of this article.

If you want the same blog as we built in this tutorial, you can go to our repository on GitHub and click deploy on the selected cloud environment and start using it, it’s excellent for testing this, but for production usage, we recommend downloading project and change logo and other things to your needs.

This is a really simple example of a blog. You can, for example, extend this by creating a contact form, a page about us or something. We are waiting for your contribution to our starters :). Have a nice day or evening whenever you read this, and start your blog with FLOTIQ!

Flotiq team

We’re a team of passionate developers dedicated to building innovative solutions and sharing our knowledge. From coding best practices to emerging tech trends, we explore it all. Our goal is to simplify complex concepts and empower developers of all levels. Join us as we learn, build, and grow together!

Posts related to Tutorials

Tutorials

Flotiq and E-commerce: How to Integrate Content Management and Order Processing

Michał Chrząszcz5 min read23 Oct 2024

Tutorials

Next.js and Flotiq: Fetching, cache, and draft mode

Michał Chrząszcz23 min read18 Sep 2024

Tutorials

Enhance your Flotiq experience with plugins

Flotiq team3 min read25 Jun 2024