Thanks!

The import does now work, but it seems like it can't parse the test .mdx file:

error - ./src/pages/test.mdx
Module parse failed: Unexpected character ' ' (1:1)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

(I have no idea what character it is referring to. The first line is just # Headline)

I'm not sure I formatted and exported the mdxConfig correctly. It does compile, at least, but it doesn't quite work:

/**
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
 * This is especially useful for Docker builds.
 */
!process.env.SKIP_ENV_VALIDATION && (await import("./src/env.mjs"));

/** @type {import("next").NextConfig} */
const config = {
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
  reactStrictMode: true,

  /**
   * If you have the "experimental: { appDir: true }" setting enabled, then you
   * must comment the below `i18n` config out.
   *
   * @see https://github.com/vercel/next.js/issues/41980
   */
  i18n: {
    locales: ["en"],
    defaultLocale: "en",
  },
};

import theme from "shiki/themes/nord.json" assert { type: "json" }
import { remarkCodeHike } from "@code-hike/mdx"
import withMDX from '@next/mdx';

const mdxConfig = withMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [
      [remarkCodeHike, { theme }]
    ],
  }, 
})

const mergedConfig = {
  ...config,
  ...mdxConfig,
};

export default mergedConfig;

I think you have two errors in the config.

• Instead of importing withMdx import something like addMdx and then initialize withMDX like before
• don't merge the configs, pass your original config to the withMDX function.

import addMdx from '@next/mdx';

const withMDX = addMdx({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [
      [remarkCodeHike, { theme }]
    ],
  },
}) 

export default withMDX(yourConfig)

Ah, now it's working I think. With the two changes you suggested I got one more error saying that a file mdx-components.jsx was missing. I added it to the root of the project with the following contents:

// A template I got from here: https://beta.nextjs.org/docs/guides/mdx#getting-started
function H1({ children }) {
    // ...
}

function H2({ children }) {
  // ...
}

export function useMDXComponents(components) {
  return { ...components };
}

And now it's working! At least the code blocks. The rest of the markdown doesn't do anything (it's not formatting it) but I guess that is an MDX configuration thing, and has nothing to do with Code Hike. So I guess, I'll have to go through that documentation next 😄

Thanks a lot for your help! :)

The rest of the markdown doesn't do anything (it's not formatting it)

it's probably tailwind resetting the styles, try to find a blog template using a similar stack (next + tailwind + mdx) to use as a guide

Ah okay, that makes sense. I did a quick H1 styling in the global.css and it works. Awesome! :D
Then I'm going to have a look at few tutorials/templates for this stack. Again, thanks a lot!