Adding a blog without rewriting the site

The homepage of this site is a port of the HTML5UP Dimension template: one page, four overlay modals, and a stylesheet that gets compiled to a string and injected inline. It works, and I did not want to rewrite it just to publish a post.

Next.js lets both routers run in the same project, which is the whole trick — the App Router docs cover the incremental path.

How the routing splits

src/pages/index.js keeps serving /. Everything under src/app/blog is handled by the App Router, with its own layout, its own CSS, and React Server Components.

A directory only becomes a route when it contains a page.js, so adding src/app/layout.js does not steal / from the old page.

The one thing that broke

The webpack config matched every stylesheet in the project:

next.config.js

{
  test: /\.s(a|c)ss$/,
  use: ['babel-loader', 'raw-loader', 'postcss-loader', 'sass-loader'],
}

That raw-loader turns CSS into a string instead of applying it — which is exactly what the old page wants, and exactly what the new one does not. Scoping the rules with include fixed it:

next.config.js

{
  test: /\.s(a|c)ss$/,
  include: path.join(__dirname, 'src/styles'),
  use: ['babel-loader', 'raw-loader', 'postcss-loader', 'sass-loader'],
}

Writing posts

Each post is an .mdx file in content/posts/, with frontmatter on top:

Field	Required	Notes
`title`	yes	Used for `<h1>` and the page title
`date`	yes	Any format `new Date()` accepts
`summary`	no	Shown on the index and in RSS
`tags`	no	An array of strings
`draft`	no	`true` hides it from production

Because it is MDX, I can drop React components straight into a post when a static code block is not enough.