Making a static site blog with the Next.js 'app' directory

 
$ npx create-next-app myblog
✔ Would you like to use TypeScript with this project? … No / YES
✔ Would you like to use ESLint with this project? … No / YES
✔ Would you like to use `src/` directory with this project? … NO / Yes
✔ Would you like to use experimental `app/` directory with this project? … No / YES
✔ What import alias would you like configured? … @/*
Creating a new Next.js app in /home/cdiesh/myblog.
 
Using npm.
 
Initializing project with template: app
 
 
Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- eslint
- eslint-config-next

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
}
 
module.exports = nextConfig

mkdir -p app/posts/\[id\]/

import { getPostById, getAllPosts } from '@/lib/api'
 
// Generate the post, note that this is a "react server component"! it is
// allowed to be async
export default async function Post({
  params: { id },
}: {
  params: { id: string }
}) {
  const { html, title, date } = await getPostById(id)
  return (
    <article>
      <h1>{title}</h1>
      <h4>{date}</h4>
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </article>
  )
}
 
// This function can statically allow nextjs to find all the posts that you
// have made, and statically generate them
export async function generateStaticParams() {
  const posts = await getAllPosts()
 
  return posts.map(post => ({
    id: post.id,
  }))
}
 
// Set the title of the page to be the post title, note that we no longer use
// e.g. next/head in app dir, and this can be async just like the server
// component
export async function generateMetadata({
  params: { id },
}: {
  params: { id: string }
}) {
  const { title } = await getPostById(id)
  return {
    title,
  }
}

npm install gray-matter unified remark-gfm remark-parse remark-rehype rehype-stringify rehype-autolink-headings rehype-slug @leafac/rehype-shiki shiki

// lib/api.ts
import fs from 'fs'
import matter from 'gray-matter'
import path from 'path'
import { unified } from 'unified'
import remarkGfm from 'remark-gfm'
import rehypeSlug from 'rehype-slug'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'
import rehypePrettyCode from 'rehype-pretty-code'
 
const postsDirectory = path.join(process.cwd(), '_posts')
 
function getPostFiles() {
  return fs.readdirSync(postsDirectory)
}
 
function getParser() {
  return unified()
    .use(remarkParse)
    .use(remarkRehype)
    .use(remarkGfm)
    .use(rehypePrettyCode, {
      theme: 'one-dark-pro',
    })
    .use(rehypeStringify)
    .use(rehypeStringify)
    .use(rehypeSlug)
    .use(rehypeAutolinkHeadings, {
      content: arg => ({
        type: 'element',
        tagName: 'a',
        properties: {
          href: `#${String(arg.properties?.id)}`,
          style: 'margin-right: 10px',
        },
        children: [{ type: 'text', value: '#' }],
      }),
    })
}
 
// small speedup from caching this parser
const parser = getParser()
 
export async function getPostById(id: string) {
  const realId = id.replace(/\.md$/, '')
  const fullPath = path.join(postsDirectory, `${realId}.md`)
  const { data, content } = matter(await fs.promises.readFile(fullPath, 'utf8'))
 
  const html = await parser.process(content)
  const date = data.date as Date
 
  return {
    ...data,
    title: data.title as string,
    id: realId,
    date: `${date.toISOString().slice(0, 10)}`,
    html: html.value.toString(),
  }
}
 
export async function getPageMarkdown(string_: string) {
  const { data, content } = matter(
    fs.readFileSync(path.join('_pages', string_), 'utf8'),
  )
  const html = await parser.process(content)
 
  return {
    ...data,
    html: html.value.toString(),
  }
}
 
export async function getAllPosts() {
  const posts = await Promise.all(getPostFiles().map(id => getPostById(id)))
  return posts.sort((post1, post2) => (post1.date > post2.date ? -1 : 1))
}

// app/page.tsx
import Link from 'next/link'
import { getAllPosts } from '@/lib/api'
 
export default async function Page() {
  const posts = await getAllPosts()
 
  return (
    <div>
      <h1>My blog</h1>
 
      <h2>All posts:</h2>
      <ul>
        {posts.map(post => {
          const { id, date, title } = post
          return (
            <li key={id}>
              <Link href={`/posts/${id}`}>
                {date} - {title}
              </Link>
            </li>
          )
        })}
      </ul>
    </div>
  )
}

---
title: First post
date: 2023-04-08
---
 
Hello world!

{
  "private": true,
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next dev",
    "lint": "next lint",
    "predeploy": "npm run build && touch out/.nojekyll",
    "deploy": "gh-pages -d out -t true",
    "postdeploy": "git push --follow-tags"
  },
...
}