For the slug, specify the name of the md or mdx file you created in the src/content/docs/ directory. (In this case, it’s test.mdx, so we specify ‘test’ for the slug)
Start the server and confirm that the submenu has been added to the sidebar.
Generating from Directory Structure
It’s troublesome to directly write in astro.config.mjs every time, so let’s introduce a method to automatically generate from the directory structure.
Let’s look at the Reference submenu.
astro.config.mjs
// @ts-check
import { defineConfig } from'astro/config';
import starlight from'@astrojs/starlight';
// https://astro.build/config
exportdefaultdefineConfig({
integrations: [
starlight({
title: 'My Docs',
social: {
github: 'https://github.com/withastro/starlight',
},
sidebar: [
{
label: 'Guides',
items: [
// Each item here is one entry in the navigation menu.
Start the server and confirm that the submenu has been added to the sidebar.
Now you’ve successfully added submenus to the sidebar.
If you want to add a different classification, you can simply create a directory in the same way and add it to the sidebar.
For general use, the method of automatically generating from the directory structure is convenient, but if you want to reuse the same mdx, it might be good to use the direct description method.
Changing the Site Title
By default, the site title is set to “My Docs”.
To change the site title, open the src/astro.config.mjs file and change the title:
astro.config.mjs
// @ts-check
import { defineConfig } from'astro/config';
import starlight from'@astrojs/starlight';
// https://astro.build/config
exportdefaultdefineConfig({
integrations: [
starlight({
title: 'Test Docs',
social: {
github: 'https://github.com/withastro/starlight',
},
sidebar: [
{
label: 'Guides',
items: [
// Each item here is one entry in the navigation menu.
I encountered the following error message in Astro:
I solved it, so here’s a note for future reference.
Cause of the error
This error indicates that no appropriate renderer was found for the specified component.
In my case, I was using Astro’s Starlight theme and encountered this error when trying to load the Button component from shadcn/ui.
The shadcn/ui is a React component, and Astro’s Starlight wasn’t using React, which caused this error. (I completely misunderstood that it was fully included…)
While this was my specific case, it’s highly likely that you’re missing some renderer necessary to display a particular component.
Solution
Once I realized that the cause was a missing React component renderer, I resolved it with the following steps:
Next.js is a React-based framework that makes it easy to implement server-side rendering and static site generation. Recently, the App Router was introduced, making routing management more flexible. This article explains how to use Markdown (MDX) with Next.js App Router.
What is MDX?
MDX is a file format that combines Markdown and JSX. While maintaining the simplicity of Markdown, it allows you to embed React components, making it easy to create documents with dynamic content.
Setting up Next.js
First, create a Next.js project. Run the following command:
Terminal window
npxcreate-next-app@latestmy-next-app
cdmy-next-app
Next, install the necessary packages to use MDX:
Terminal window
npminstall@next/mdx@mdx-js/loader
Configuring MDX
Now, update the Next.js configuration file, either next.config.js or next.config.ts. Add the following code:
This configuration allows you to treat MDX files as pages.
Creating an MDX file
Next, create a new folder called posts inside the pages folder, and create a file named example.mdx inside it. Here’s a sample content for example.mdx:
example.mdx
# MDX Sample
This is an example of an MDX file. Below is an example of a React component.
<MyComponent/>
## Section
This section explains how to use MDX.
Creating a Component
Next, create a components folder and create a file named MyComponent.jsx or MyComponent.tsx. Here’s a sample content for MyComponent.jsx:
MyComponent.jsx or MyComponent.tsx
const MyComponent = () => {
return <div>This is an embedded component.</div>
}
exportdefault MyComponent;
Creating a Page
Finally, create a file named pages/posts/example.jsx or pages/posts/example.tsx and add the following code:
pages/posts/example.jsx or pages/posts/example.tsx
import Example from'../../posts/example.mdx'
const ExamplePage = () => {
return <Example />
}
exportdefault ExamplePage;
Starting the App
Once all the settings are complete, start the app:
Terminal window
npmrundev
Access http://localhost:3000/posts/example in your browser to confirm that the MDX file is displayed correctly.
Conclusion
This article introduced how to use Markdown (MDX) with Next.js App Router. By using MDX, you can combine the convenience of Markdown with the flexibility of React components to create richer content. Try incorporating it into your own projects!
