Next.js Blog Starter Kit with styled-components

This is a Blog starter kit built using Next.js 14 (with app router), styled-components and typescript.

Live Demo: https://nextjs-blog-styled.vercel.app/

Features

• styled-components configuration with server-side rendering
• Data sourcing for a blog post through Markdown files
• Styling through Reusable components
• Typescript and Eslint configuration
• Uses Next.js latest App Router paradigm

How to use

Important

This application requires Node.js v18.17+.

Installation & running project

Execute create-next-app with npm or yarn to bootstrap this template or clone this repo:

npx create-next-app --example https://github.com/ajeetchaulagain/nextjs-blog-starter-styled-components my-blog

OR

git clone https://github.com/ajeetchaulagain/nextjs-blog-starter-styled-components.git my-blog

Install node_modules and run dev server:

cd my-blog
npm install
npm run dev

Your dev server should be up and running at http://localhost:3000

Usage Guide/Note

• To add a blog post, add the new markdown file in /posts directory

  Note: To create a blog post remark and remark-html is used to convert the markdown files into HTML string, which is then passed to page as the props. And for the metadata, gray-matter is used.

• For styling markdown post, base styles are setup in styles/MarkdownStyles.tsx. For styling other pages, a minimal set of re-usable components created in this project are used.

Deployment

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.