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.
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 command.
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!
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.
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.
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.
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
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 Use Case
