AboutProjectsBlog🛟

Building a blog with Next.js 🖥️

This website was created using Next.js 14 (app router) and shadcn, with the blog posts being generated programmatically from MDX (markdown with JSX).

Shadcn provides pre-built UI components that makes it easier to iterate quickly. Additionally, deployment on Vercel is straightforward 🌱.

The project structure is organized as follows:

- src: includes the source code
- src/app: houses the pages
- public: stores static files
- posts: contains the blog posts

Within the /src/app folder, there are several files, including:

- /blog/[slug].tsx: a dynamic route for blog posts
- page.tsx: the home page
- layout.tsx: a root component that wraps all pages

I got help from from Max Leiter (1) to make this site's blog posts look better e.g. syntax highlighting for code blocks.

Overall, using Next.js streamlines the creation of this website, and enables features like SSR and SSG.

Source </> code is available on GitHub (2).


Sources:


Website design is inspired by Spotlight Tailwind