Making a blog with Next.js 13

1 May 2023

A walkthrough of some of the pitfalls and ways to solve them.

Accessing the current article metatdata

Because server components do not have access to the router object, or obvious way to access the current route path, another approach is needed.

One way is to use a client component to display the metadata in the heading.

Code syntax highlighting

After trying a few options I settled on Rehype Pretty Code as it ticked a lot of the boxes I was looking for:

The documentation site uses Tailwind and the config file is a good example of how to configure the plugin.

Glsl rendering

Use client component and import the GlslCanvas library dynamically to avoid SSR issues as it uses window.

Helpful code here