
Can't access the router in `generateMetadata`, and using `params` is inadequate if you need the actual path. Guess
we have to pass it through from middleware.

[NextJS Discussions](https://github.com/vercel/next.js/discussions/50189#discussioncomment-6899338) suggested invoking `set` directly on `request.headers` but that was returning `null` in `generateMetadata`.

Had better success modifying the `NextResponse.rewrite` as documented in [this Vercel demo](https://vercel.com/templates/next.js/edge-functions-modify-request-header).

Example below:

<Gist id="d04df6cbb69d0b688db122e2b0296712" />


An annoying hack to get access to the current pathname in NextJS 13 app router generateMetadata function.

Accessing pathname in NextJS generateMetadata


Four months into a medical thing, the summary of which is “the human body can be spontaneous and inconvenient”. Still got a way to go yet, and much of my time and energy is spent doing some sort of pain management. It is exhausting. I have reduced endurance, increased malaise, and just about everything is a chore as I retrain myself back into having focus and being functional, and I’m hanging out to get back to some of the fitnessy stuff I used to do.

So, how can I make other parts of my life suck less?

## Infrastructure

I run a bunch of websites from various projects I have accumulated over the years.

I have plans for the ones which were on WordPress to be migrated *somewhere*. I’ve got nothing against WordPress. It’s a great CMS that’s highly extensible, but for most of my clients I feel there are better options for what they want to do that they can self-manage. For my own projects, I’m trying to reduce the amount of time I spend on administrative tasks, and WordPress management is something I simply don’t want to do anymore. I’m leaning towards Ghost or some other headless CMS. It’s been a while since I reviewed this and I need to address it before the renewal date of my VPS.

This website and my podcast websites for [STEAM Powered](https://www.steampoweredshow.com) and [The Rejection Economy](https://www.rejectioneconomy.com) used to be on [Gatsby](https://www.gatsbyjs.com/). But as I’ve been doing other development with [NextJS](https://nextjs.org/) and rather like it, a while ago [Michele Ong](https://www.micheleong.com) was moved to that combination as a trial. This was nice. So last weekend STEAM Powered was migrated, and this weekend The Rejection Economy joined the fold. Both podcast websites now share the same code structure and an almost identical theme for consistency and ease of maintenance.

The podcast content is also managed using [Sanity.io](http://Sanity.io) as a headless CMS with an API that I intend to leverage so that I can automate website updates when I release new episodes. More about this on [Ask Me About My Podcast](https://askmeaboutmypodcast.substack.com/) when I get around to implementing it.

After the success of the migrations to NextJS, there is a strong possibility that those WordPress sites will also be moved to NextJS with markdown for the content. Given they’re being managed for posterity and will no longer be updated, I’m looking for something as low effort and maintenance as possible.

## Administrative

### CRM

I used to host my podcast email accounts on Gmail with custom domains. For Reasons(TM), I’ve now shifted to other mail providers. When I was using Gmail, I also used [Streak](https://www.streak.com/) as my CRM for managing my guest communication workflows. Streak is great and does exactly what I need it to, and helps me keep on top of my various lines of communication, but doesn’t seem to have a non-Gmail dependent version. So I needed a replacement.

A few platforms offer companion CRM services, but I’d rather have something that isn’t bound to the mail service.

I’ve been using [Notion.so](http://Notion.so) on and off for a few years and rather like the idea of being able to have my notes and documentation in one place. I also happened upon this [Simple CRM Dashboard](https://www.notion.so/7fd27cd680bc46119cf470d93eab3791?pvs=21) template (detailed post by its creator [here](https://zapier.com/blog/notion-crm/)) which meets my needs with a few minor adjustments and I’m trying it out as part of my workflow. Will see how it goes.

### Content

As a content creator, I also have a tendency to jot down ideas for things to write or talk about, but don’t quite get around to executing them due to the mound of other things on my list. Also, once it’s jot down, it is not longer plaguing my brain so I forget about doing anything about it.

As part of my shift to using [Notion.so](http://Notion.so) more for documentation and as a CRM, I also found a default template [Content Calendar](https://www.notion.so/templates/content-calendar) (under the Marketing category) which now gives me a repository for dumping all of my content ideas, but also allows me to see them in context with each of my content mediums so that I can know what’s floating about waiting to be written and get them actively into a publishing workflow that’s also calendared for scheduling.

This post is first off the ranks with this new workflow so we’ll see how that holds up over time as well.

### Research

One other thing I’ve struggled with is that I treat my wanderings on the internet as a learning exercise, but without any real structure, so I have hundreds of open bookmarks across multiple browser workspaces, other things stashed in places like Instapaper, Pocket, and similar bookmarking services, and other media like podcasts saved and marked in other random and unhelpful ways.

It is not uncommon for me to be in conversation with someone, be reminded of something I saw or read online a while ago, and have no reasonable way of locating that article or bit of media again. Very frustrating.

But I learned about [Zotero](https://www.zotero.org/). It’s a research tool, often used by academics, but if you do research for anything, be it as an author, screenwriter, or in my case, science communication, interviews, and general knowledge hoarding, this is a great repository for storing all sorts of things you may find online or otherwise digitally. It’s fantastic and I can tag and note and search for things I’ve stumbled on to my heart’s content, provided I diligently add things I think may come in handy later.

## Conclusion

Baby steps, but perhaps this will help nudge me back into thoughtfully managed productivity.

Also, much love for Zotero.

An revision of tools for improved productivity and workflow management.

Recently, in workflow optimisation


I recently migrated this site to Next.JS from Gatsby. I wish I had a good reason for this, but I don't.

The Gatsby site used MDX and I wanted to carry that over. Little did I know what a pain in the arse it is to get MDX working *just so* on Next.JS.

I needed a setup that supported:

* frontmatter
* inlined components
* colocated images
* presentation templates

Next.js has [`@next/mdx`](https://www.npmjs.com/package/@next/mdx) which supports inlined components, and I guess colocated images through imports, but not frontmatter. Also, presentation templates need to be imported inline which is ugly, IMO. I could live with the image imports, but having to import the same components into every MDX file that I needed was not optimal. It's nice that you can keep your `mdx` files in `pages/` though.

So onward to [`next-mdx-remote`](https://www.npmjs.com/package/next-mdx-remote). This supports frontmatter using `grey-matter`, and you can pass common inline components through the template which you can set up through Next.JS dynamic routes. Ace. But no colocated images. In fact, images can only be served through `public/`. I attempted to dynamically `require` or `import` them. I tried a variation on [this solution](https://stackoverflow.com/a/65681762/6996864) to load the images, but kept getting runtime errors. Alas, etc.

Resolving that I didn't have the time to faff around with this just now (procrastination task), my solution was to use [`copy-webpack-plugin`](https://www.npmjs.com/package/copy-webpack-plugin) and have webpack copy the images to `public/`. I don't like it, but it works, and I can figure out if there's a nicer way of doing this later.

```javascript:title=next.config.js
webpack: (config) => {
    config.plugins.push(
        new CopyPlugin({
            patterns: [
                {
                    from: path.join(__dirname, 'path/**/*.jpg'),
                    to: path.join(__dirname, 'public/[path][name][ext]'),
                },
                ...
            ],
        })
    );
}
```

Update the `from` to point to where your colocated images will be, and the `to` will match the directory structure in `public/`. You also need to use `path.join` or whatever you want to use to have the full path. Relative paths won't work here.

You'll now be able to use markdown image syntax to reference the image:

```markdown
![Image description](colocated-image.jpg)
```

This will generate an `<img />` tag, which you can replace in your template by passing an `img` component to `MDXRemote`. You can replace it with `next/image` or a custom image component. `path` is a variable set to the path to the `mdx` file.

```javascript
const components = (path) => ({
    img: (props) => {
        return <Image {...props} src={`/assets/${path}/${props.src}`} fill lazy />;
    }
});

return (
    <MDXRemote {...mdxSource} components={components(path)} />
);
```

## See also

* [How to use images in a `.mdx` file outside of `public/` folder while using `next-mdx-remote` in Next JS? (StackOverflow)](https://stackoverflow.com/a/65681762/6996864))


An inelegant workaround to use colocated images with MDX on Next.JS.

Colocated images with MDX and Next.JS


This is specifically if you're using [`sharp`](https://github.com/lovell/sharp) in [Next.js](https://nextjs.org/) API endpoints, which [Netlify](https://www.netlify.com/) deploy as [functions](https://docs.netlify.com/functions/overview/). It might be relevant even if you're *not* using Next.js, but I haven't tested this.

Netlify may fail to build, or the build will be successful but the API endpoint will crash/500 when invoked.

I was getting successful builds, but the endpoint would fail, and the Netlify function log would report `Error: Cannot find module 'sharp'` because it seems Netlify excludes this package for Reasons(TM).

[Next.js documentation](https://nextjs.org/docs/messages/sharp-missing-in-production) recommends adding the `NEXT_SHARP_PATH` environment variable:

```bash
NEXT_SHARP_PATH=/tmp/node_modules/sharp
```

But this doesn't affect Netlify functions. Good to have, though.

Another recommendation was to add `sharp` to `external_node_modules` in `netlify.toml`, which explicitly tells Netlify which external modules to include in the bundle:

```text:title=netlify.toml
[functions]
  external_node_modules = ["sharp"]
```

Nice thought, but this didn't change anything for me.

What did work for me was using a package alias to give the `sharp` package a custom name so that it doesn't get filtered out. [This ticket](https://github.com/netlify/next-runtime/issues/1195#issuecomment-1030533349)[1] uses the `yarn` syntax, but the `npm` syntax is similar:

```bash
npm i some-alias@npm:package@version
```

This allowed the package to be found, but the package build was now failing with the error `Module parse failed: Unexpected character '' (1:0)`. I've lost where I found this solution, but adding this to the `webpack` config in `next.config.js` worked for me:

```javascript:title=next.config.js
config.module.rules.push({
    test: /\.node$/,
    use: "node-loader"
});
```

Adjust the syntax to whatever it is you're doing in your webpack config.

Anyway, this took far longer than I would have liked to resolve, hopefully this saves you some time.

---

[1] Further down, another user suggested creating a separate plugin that forcibly includes the `sharp` module. Tried this, didn't work for me.


4 posts tagged “next-js”

Accessing pathname in NextJS generateMetadata

Recently, in workflow optimisation

Colocated images with MDX and Next.JS

Deploy sharp with Next.js on Netlify