DEV Community

Cover image for All In One, NextJs Blog Template🏠
danpacho
danpacho

Posted on

All In One, NextJs Blog Template🏠

Introducing Projects 😃

Visit Next Your Home Guide, built with this template!

Inspiration 🧐

I always think that writing is the best practice to fully absorb knowledge. But it was always difficult to make writing a habit. In order to make good writing habits, I thought making the best environment for writing is first.

After a long time of effort, I was able to create the blog environment that I wanted.

Easy to start, Reliable, Rich Feature and Fast Blog!

Demo of project 🎉

dark-theme main page

dark-theme mobile page

I'm very happy about result of blog 🙂

Goal of project ✅

Tech 🛠

  1. Create a blog that anyone who's experienced development can start regardless of their skills.
  2. Performance and Maintenance.
  3. Add the features that are not supported on existing writing platforms.

Design 🏛

  1. Taking off the consistent design that pursues simplicity and create different feelings.
  2. Content-Focused design
  3. Separates profiles into their own pages.
  4. Reduce fatigue by improving text access through pagination and reducing vertical scrolls.
  5. Categories, Series, and Tag based navigation.
  6. Easy to navigate posts
  7. Selectable Colors
  8. Familiar blogging UX

How it was built ⚙️

  1. language 📜: typescript
  2. framework 📦: NextJs
  3. styling 💅: styled-components
  4. markup 📒: mdx

Rich Feature List 🏖

  1. Light/Dark mode full support
  2. Integrate Profile with full feature of mdx
  3. Table of content on desktop/mobile
  4. Image optimization with next/image
  5. Automatic image size support for static/external
  6. Automatic pagination
  7. Recover scroll position when navigating to previous page
  8. Analyze visitors with Google Analytics! Run it on the partytown🎉 thread and get the performance (partytown 🔎)
  9. Support sitemap, rss generation on build
  10. Math katex support (optional)
  11. Automatic post refreshing in dev mode
  12. Specific error informations about blog posts
  13. Decent code block with code copy button

etc...

How to Start? 🙌

Visit GitHub repo or Click the Next your home guide to start your writing journey!

I wrote down the kind explanation from start to finish!

Thank you for reading!

I hope it is useful for the blog starter😃

Top comments (5)

Collapse
 
shriekdj profile image
Shrikant Dhayje

anybody who get the error like Type error: 'Component' cannot be used as a JSX component.
for resolving it just upgrade the package named @types/react to newer version issue will be resolved while building the site

Collapse
 
danpacho profile image
danpacho

Oh, I will fix Type error: 'Component' cannot be used as a JSX component with your solution. Thanks a lot 😎!

Collapse
 
tflijon profile image
LiJon • Edited

Geeky is a highly customizable feature-rich NextJs Blog Template.

Collapse
 
shriekdj profile image
Shrikant Dhayje

cool template, can i use it ?
looks fabulous.

Collapse
 
danpacho profile image
danpacho

Thank you for your feedback! It would be my pleasure to use this template 😃!