/nextjs-blog

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

Primary LanguageJavaScriptMIT LicenseMIT

My Next.js Blog

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

Table of Contents

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')}