Building a blog with Next.js 🖥️

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

The use of daisyui provides pre-built (opt-in Tailwind) UI components that makes it simpler to iterate quickly. Additionally, deployment on Vercel is ez-pz 🌱☀️.

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.

🌞/🌚 mode (at the top ⬆️) is toggled with next-themes.

There's also an API route available. You can learn more in the docs. Cool huh? 🤔

Overall, using Next.js streamlines the creation of this website. I am excited to continue exploring the advantages of SSR and SSG.

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

Sources:

• [1] https://maxleiter.com/blog/build-a-blog-with-nextjs-13
• [2] https://github.com/adnjoo/portfolio-website

Website design is inspired by Spotlight Tailwind