Git Product home page Git Product logo

nextjs-velite-blog-template's Introduction

NextJS 14, Tailwind, Shadcn UI, MDX and Velite Blog Template

In this repo is a simple implementation of a markdown static blog, a demo can be seen here, Features include:

  • MDX Components
  • Shadcn UI
  • Pagination
  • Dynamic Open Graph Image
  • Syntax Highlighting in code block

Learning Points

Hopefully, from this project and the video, you can learn:

  • NextJS 14 basics (layouts, app router etc)
  • NextJS SEO
  • NextJS Dynamic Graph Images
  • Velite Setup and usage
  • Shadcn/ui setup and usage
  • Custom components in MDX
  • Tailwind styling

YouTube

You can follow along with me as we build this on YouTube. The commits will line up with the GitHub chapters so you can easily see what changed in each section.#

YouTube video

Credits

Much of the design of this project is taken from shadcn in his projects, such as shadcn/ui and Taxonomy

nextjs-velite-blog-template's People

Contributors

jolbol1 avatar paranoia8972 avatar

Stargazers

Native avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.