My Next.js Blog

✨ My blog built with Next.js, MDX, and TailwindCSS.

---

Table of Contents

• Local Development
  • Prerequisites
  • Install
  • Setup ENV Variables
  • Working with Next.js
    • Folder Structure
    • NPM Scripts
• Content Management
  • Posts & Pages
• Gotchas
  • TailwindCSS

---

Local Development

Prerequisites

• Node LTS

Install

Use create-next-app to get up and running quickly:

npx create-next-app blog --example https://github.com/gregrickaby/nextjs-blog

Setup ENV Variables

Create an .env file in the root of the project.

Add the following:

NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION="YOUR_VERIFICATION_CODE"

NEXT_PUBLIC_GOOGLE_ANALYTICS="UA-1234567-X"

---

Working with Next.js

Folder Structure

├── components
|  ├── atoms
|  |  └── Title
|  |     ├── Title.js
|  |     └── Title.module.css
|  ├── molecules
|  ├── organisms
|  └── templates
├── data
|  ├── books
|  ├── pages
|  ├── photos
|  └── posts
├── lib
├── pages
|  ├── [slug].js
|  ├── _app.js
|  ├── _document.js
|  ├── blog
|  ├── books
|  └── index.js
├── public
|  ├── blog
|  ├── favicon
|  ├── fonts
|  ├── optimized
├── scripts
|  └── generate-rss.js
├── styles
|  ├── global.css
|  └── prism.css

Components - This folder contains all of the components used on the blog, organized by the Atomic Design principle.

You'll see a folder with the same name as the component. For example, the Title component is contained in the components/atoms/Title folder. In addition, the component's styles are located with the component: components/atoms/Title/Title.module.css

Data - This folder contains all of the MDX files which is what powers the content on the blog.

Lib - This folder contains helper functions used throughout the blog.

Pages - This folder contains standard Next.js pages and routes, which are used to render pages on the blog.

Public - This folder contains all of the static assets used on the blog.

Scripts - This folder contains scripts which are used at build time.

Styles - This folder contains global styles used on the blog.

---

NPM Scripts

Start local dev server:

npm run dev

Test a build prior to deployment:

npm run build && npm start

Bulk linting:

npm run lint

Bulk formatting:

npm run format

Bypass Lefthook:

git commit -m "my commit message" --no-verify

---

Content Management

Posts & Pages

It's very simple:

1. Create an .mdx file
2. Place the .mdx file in data/posts, data/pages, or data/books
3. Add front matter and content

The Front Matter slug must match the blog post filename. This is because Next.js is querying data based on the post slug.

---

Gotchas

TailwindCSS

Tailwind font-* and dark styles do not work in CSS Modules. Instead, add the styles in the component using cn() to merge them.

className={cn(styles.date, 'font-roboto dark:text-gray-100')}

---