alexmarqs / simple-blog-nextjs

🚀 Simple blog built with Next.js + TailwindCSS

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.