Skip to content

alexmarqs/simple-blog-nextjs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

8 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Simple Blog using Next.js

This is based on starter template for Learn Next.js but using some customizations ๐Ÿš€.

Demo: https://simple-blog-nextjs-three.vercel.app

Built with

  • ๐Ÿ”ฅ Next.js v11!
  • ๐Ÿ”ฅ Cloud Firestore (Firebase) via Next.js API route to implement real time count views mechanism. Note: Once you choose a region for your database, select the same location for your Serverless Function Region. This will minimize latency between your Serverless Function and your database, improving performance
  • ๐ŸŽจ Tailwind CSS integration for styling
  • โœ๏ธ Linter with ESLint
  • ๐Ÿ’ฅ Custom API route / serverless function to use Playwright to create thumbnails for blog posts preview when sharing the link in the social media (Twitter, Facebook, etc.)!
  • ๐Ÿ›  Prettier for code formatter
  • ๐ŸฆŠ SEO with Next SEO
  • ๐Ÿ“‘ reading-time package to get a Medium's like reading time estimation
  • โŒ› NProgress progress bar to convince the users that something is happening
  • ๐Ÿ“ SSG (Static Site Generation) pre-rendering from Next.js to parse blog markdown files during build time
  • ๐Ÿ’ฅ SWR React hook lib for remote data fetching, it first returns the data from cache (stale) and then sends the fetch request (revalidate)

Running Locally

$ git clone https://github.com/alexmarqs/simple-blog-with-nextjs.git
$ cd simple-blog-with-nextjs
$ yarn
$ yarn dev

Note: Do not forget to rename the file .env.example to .env.local and set your own variables.