How to write your first article.

*note: All the files you will create or interact with are in
  • BLOG_CONSTANTS folder : inside this we have our _BLOG_SETUP.tsx file where we set our authors, navbar and other details and we have _ARTICLES_LIST.tsx file where we maintain our article list.
  • blog folder : Inside this we will create out blog files or sub folders for your article files like this current file is in pages -> blog -> tutorial
  • images folder : In this we will save all our images to use in the articles, like the og-image.jpg file is stored in public -> images folder.

1. Creating the article file.

First create a file inside blog folder in pages (/pages/blog/). You can also create a sub folder inside blog folder. For SEO, the best practice is to name the file and folders in all lower case seperated by hyphen "-" and end with ".tsx".
example: "your-first-article.tsx". This will create a tsx file.

2. Adding your article details in ARTICLES_LIST

Go to /BLOG_CONSTANTS/_ARTICLES_LIST.tsx file. Here we will add details of your article in ARTICLES_LIST array as follows.

// Import author profiles, just type the name you have set in _BLOG_SETUP inside the curly brackets
import { MAYUR, RUPALI } from './_BLOG_SETUP';
export const ARTICLES: iArticle[] = [
path: '/pages/blog/your-first-article.tsx',
featureArticle: true,
preview: {
// the author object you created in _BLOG_SETUP file
author: MAYUR,
date: "August 6 2022",
articleTitle: "Your first article",
shortIntro: "This is a demo file for your first article, you can copy structure of this file to create multile article.",
tags: "demo, your first article",
thumbnail: "/public/imp_assets/tutorials/how-to-write-first-article.svg",
category: 'tutorial'
seo: {
title: "Your first article",
"This is a demo file for your first article, you can copy structure of this file to create multile article.",
keywords: "demo, blog setup, first article",
ogImage: "/images/tutorials/demo-image.jpg",
twitterHandle: "@mayur_nalwala",

In our article details we have 4 important properties path, featureArticle, preview, and seo.

  • path
    As show in the above image, path contains the file path of our article.
    If you have Path Intellisense installed in your VS Code, it will be ease to add path, just hit "/" and then auto suggestions will come up, just follow the auto suggestions and set the path of the article file.

  • featureArticle
    You can set it true or false as shown in the above image. If true the article card will be of full width as shown in the image below.
    *note : adding featureArticle property is optional

    feature article example |

    feature article exmaple

  • preview

    This will display the details of the article in the article cards on main home page and article's header on the article page

    • author : Paste the author variable imported from _BLOG_SETUP as shown in the image.
    • date : Write the article date in quotes i.e. as a string.
    • articleTitle : Write the article title in quotes i.e. as a string.
    • tags : Write tags and seperate with commas.
    • thumbnail : Save the image file in public-images folder and paste the image path. This will be displayed in article cards on home page. For thumpbails the recommended size is 540x300px.
    • shortIntro : A short intro for your article that will be shown on article cards.
    • category : If the article in under some category, write the category name.
    Check the above image for example of check /BLOG_CONSTANTS/_ARTICLES_LIST.tsx file.
  • seo

    SEO details for your article page. As shown in the above image seo contains 5 important properties title, description, keywords, ogImage, twitterHandle, author.

    *note : seo is optional as we have already passed preview we will create default seo with that but if you want to pass any extra keywords or different page title, description etc we can write that in seo : {} object.

3. Writing the article.

Now we can go to our created file your-first-article.tsx and write our article. To write our article we will use different components as shown in Blog with sidebar layout or Blog with centered layout example. You can also checkout all the available components to write your article in All Components Demo page.

For any any queries related to this project / template feel free to connect with us at You can also post any comments on our github discussions.

Copyright © 2023 Next Js Blog Template

Privacy PolicyTerms and Conditions