How to Build a Modern, Flexible, and Powerful Development Blog in Next.js in Minutes

Next.js Blog Template – a fast, free, modern, and fully customizable website platform built using Next.js and Nextra. Whether you're a developer looking to showcase your projects, document technical details, or share your technical insights, this template is designed with you in mind, offering a clean and efficient platform built with modern tools. TL;DR: Lets go

This template powers t0nyz.com (opens in a new tab), so you can see it in action firsthand.

🌟 Key Features

• ⚡ Fast: Built with Next.js, ensuring your blog is blazingly fast and responsive across all devices.
• 🖥️ Modern: Leverage the power and latest features of Next.js for a modern web experience.
• 🌐 Hosted Free: Easily deploy your blog to free hosting platforms like Vercel or Netlify.
• 🔄 CICD: Integrated continuous integration and continuous deployment, so your changes are live in an instant.
• 🔍 SEO Built-In: Pre-configured SEO settings to help your content rank well in search engines.
• ✨ Simple & Clean: A minimalistic design, free of unnecessary bloat and clutter, allowing your content to shine.

Why should you use this template?

This template goes beyond a generic Nextra setup by including:

• Built-In Favicon Example: A ready-to-customize favicon setup, ensuring your blog has a unique and professional look.
• Built-In Google Analytics Example: Easily track your blog's performance with Google Analytics.
• Built-In Project Examples: Pre-made project pages to help you quickly showcase your work.
• Built-In SEO Optimization: Pre-configured meta tags and settings to boost your blog's visibility in search engines.

Get Started

Ready to get started? Click the button:

🛠️ Customizing Your Blog

Here are some quick tips on how to customize your blog to make it truly yours:

🎨 How to Update Favicon Pack

To update the favicon, replace the existing files in the public folder with your own favicon files. Make sure to include multiple sizes for different devices.

SEO Stuff

Setting Up Google Analytics

To properly set up Google Analytics for your project, follow these steps:

1. Obtain Your Google Analytics Tracking ID
   If you haven't already, you'll need to create a Google Analytics account and obtain your tracking ID. This ID typically starts with "G-" followed by a series of numbers and letters. For example, "G-#########".

   • Go to Google Analytics (opens in a new tab).
   • Sign in with your Google account.
   • Create a new property if you haven't done so already.
   • Copy your unique tracking ID (e.g., G-XXXXXXXXXX).

2. Update Your Next.js Project

   • Open your project in your code editor.
   • Navigate to the file located at /pages/_app.js.
   • Add the following snippet to inject Google Analytics into every page:

How to Update Meta Tags

Meta tags can be updated in the theme.config.js file or directly in the page MDX files (e.g., index.mdx):

---
title: My Next.js Blog
description: A modern, customizable blog built with Next.js and MDX. Perfect for developers and content creators who want to quickly set up a blog.
keywords: next.js, blog, MDX, customizable, project
---

How to Update Sitemap

1. Goto https://www.xml-sitemaps.com/ (opens in a new tab)
2. Download the sitemap files once generated
3. Replace the sitemap.xml file in the '/public' folder

🤖 How to Update robots.txt

You can update the robots.txt file in the public folder. This file controls how search engines crawl and index your site. Simply edit the file to include or exclude specific paths as needed.

Example robots.txt file:

User-agent: *
Disallow: /private/
Allow: /
Sitemap: https://yourwebsite.com/sitemap.xml

Be sure to update the URL in the sitemap to your hosted URL

🙌 Thats it! Enjoy! Let me know if you have any questions

Github: https://github.com/t0nyz0/nextjs-blog (opens in a new tab)