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 ๐Ÿ˜ƒ!