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/
- 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
Important
This application requires Node.js v18.17+.
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-blogOR
git clone https://github.com/ajeetchaulagain/nextjs-blog-starter-styled-components.git my-blogInstall node_modules and run dev server:
cd my-blog
npm install
npm run devYour dev server should be up and running at http://localhost:3000
-
To add a blog post, add the new markdown file in
/postsdirectoryNote: 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.
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.