NextJS 13 Blog Starter

• Next.js

  2,037 120,313 10.0 JavaScript

  The React Framework

  

NextJS 13 is here and you know what that means, time to create another dynamic markdown blog. While the NextJS blog starter is an amazing resource, it does not yet feature the new app directory file-based routing. It's time to take things into our own hands, at least until the new system is made public on NextJS 13.

• remark

  42 7,187 6.9 JavaScript

  markdown processor powered by plugins part of the @unifiedjs collective (by remarkjs)

  

remark is a powerful and versatile library that will allow us to start working with our markdown .md blog posts. remark-html is a plugin for remark that allows us to serialize our markdown into HTML.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• remark-html

  4 301 6.5 JavaScript

  plugin to add support for serializing HTML

  

remark is a powerful and versatile library that will allow us to start working with our markdown .md blog posts. remark-html is a plugin for remark that allows us to serialize our markdown into HTML.

• gray-matter

  17 3,762 1.2 JavaScript

  Smarter YAML front matter parser, used by metalsmith, Gatsby, Netlify, Assemble, mapbox-gl, phenomic, vuejs vitepress, TinaCMS, Shopify Polaris, Ant Design, Astro, hashicorp, garden, slidev, saber, sourcegraph, and many others. Simple to use, and battle tested. Parses YAML by default but can also parse JSON Front Matter, Coffee Front Matter, TOML Front Matter, and has support for custom parsers. Please follow gray-matter's author: https://github.com/jonschlinkert

In order to get post information (such as author, title, date, etc.) from our HTML without having them be apart of our rendered post we need a way to parse YAML front matter, this is where gray-matter comes in hand.

• next13-blog-starter

  1 10 10.0 TypeScript

// components/Navbar.tsx import Link from "next/link"; export default function Navbar() { return (

• HomeNavLink> li>
• BlogNavLink> li>
• Github NavLink> li> ul> nav> div> ); } type NavLink = { href: string; children: React.ReactNode; }; const NavLink = ({ href, children }: NavLink) => { return ( {children} Link> ); };

• date-fns

  115 33,636 9.3 TypeScript

  ⏳ Modern JavaScript date utility library ⌛️

  

Create a formatter for the post dates using date-fns:

Suggest a related project