Let’s dive into MDX in Next.js!<\/p>\n\n\n\n
What Is MDX?<\/h2>\n\n\n\n
MDX<\/a>, short for Markdown eXtended, is a markup language that supports the use of JSX within Markdown documents. In other words, MDX combines the simplicity of Markdown with the power of React components. This enables you to create interactive content with no effort.<\/p>\n\n\n\n This is what a sample of MDX looks like:<\/p>\n\n\n Typically, MDX is used for content that requires both rich formatting and interactivity, such as documentation or blog posts. By allowing React components to be embedded directly into a Markdown document, MDX simplifies the creation of dynamic content that would be difficult to achieve with simple Markdown.<\/p>\n\n\n\n MDX is supported by several libraries and frameworks, including Next.js, Gatsby, Nuxt, and other static site generators. It is also endorsed by popular documentation sites like Storybook and Docz.<\/p>\n\n\n\n Next.js is a popular framework for building server-side web applications with React. Specifically, it comes with built-in support for Markdown and MDX through several tools, including With Take a look at the official documentation<\/a> to find out more about using Markdown and MDX. Now, it is time to learn how to build a blog based on MDX files in TypeScript with Next.js!<\/p>\n\n\n\n Before getting started, make sure you have npm 18+ installed on your machine. Otherwise, download it here<\/a>.<\/p>\n\n\n\n Follow this step-by-step tutorial and learn how to build an MDX-based blog with TS in Next.js!<\/p>\n\n\n\n Set up a Next.js TypeScript project<\/strong> You will be asked some questions. Answer as follows:<\/p>\n\n\n This will initialize a Next.js TS project inside the If everything went as expected, you should be seeing the default Create Next App<\/a> view below:<\/p>\n\n\n\n Great! You now have a Next.js project ready to be turned into an MDX blog. Keep reading and learn how!<\/p>\n\n\n\n Populate your blog with some MDX files<\/strong> This is what a sample Take a look at the special syntax used at the beginning of the file to define a Also, note the Define the MDX components<\/strong> As you can note, it wraps the Next.js\u2019s<\/a> component<\/a> in a custom Keep in mind that you can also define React components to override the default HTML element used by Similarly, you can create an And a custom What these components have in common is that they are characterized by a custom CSS class. This gives you the ability to style these MDX components as you like, for example with the following CSS rules in import SomeComponent from '.\/SomeComponent';\n\n# My MDX Blog Post\n\nHere's some text for my blog post. I can include React components like this:\n\n<SomeComponent<\/span> prop1<\/span>=\"value1\"<\/span> prop2<\/span>=\"value2\"<\/span> \/><\/span>\n\nI can also include regular Markdown:\n\n## Section Heading\n\n- List Item 1\n- List Item 2\n- List Item 3<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nMarkdown\/MDX in Next.js<\/h2>\n\n\n\n
next-mdx-remote<\/a><\/code>. This package developed by the community allows Markdown or MDX content to be fetched directly inside getStaticProps()<\/code> or getStaticPaths()<\/code> with no extra configuration required.<\/p>\n\n\n\nnext-mdx-remote<\/code>, you can load MDX content from a variety of sources, including local files, remote URLs, or a database. The package also comes with a powerful MDX render. This is able to transform MDX content into React components and can be configured with custom UI components.<\/p>\n\n\n\nBuilding an MDX Blog in Next.js and TypeScript<\/h2>\n\n\n\n
Next.js officially supports TypeScript<\/a>. Launch the command below in the terminal to create a new Next.js TypeScript project with:<\/p>\n\n\nnpx<\/span> create-next-app<\/span>@latest<\/span> --ts<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n\u221a What is your project named? ... nextjs-markdown-blog\n\u221a Would you like to use ESLint with<\/span> this<\/span> project? ... Yes\n\u221a Would you like to use `src\/`<\/span> directory with<\/span> this<\/span> project? ... No\n\u221a Would you like to use experimental `app\/`<\/span> directory with<\/span> this<\/span> project? ... No\n\u221a What import<\/span> alias would you like configured? ... @\/*<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nnextjs-markdown-blog<\/code> directory. Enter the folder in the terminal and launch the Next.js demo app with:<\/p>\n\n\ncd nextjs-markdown-blog\nnpm run dev <\/code><\/span><\/pre>\n\n\n![\"The](\"https:\/\/paper-attachments.dropboxusercontent.com\/s_191A662EDA462332388B4BD2B7D72CAA60238F6E34C4854D37969598EE3708A1_1679600583465_image.png\")
<\/figure>\n\n\n\n
Your blog will consist of articles read from MDX files. Create a _posts<\/code> folder in your project and populate it with some .mdx<\/code> articles. If you lack imagination or time, you can use a Lorem Ipsum<\/a> generator or ask ChatGPT to generate some content for you.<\/p>\n\n\n\ntop-programming-languages.mdx<\/code> blog post file may look like:<\/p>\n\n\n---\ntitle: Top 5<\/span> Programming Languages to Learn\ndescription: A brief overview of the most in-demand programming languages you should consider learning in 2023<\/span> to stay ahead of the curve in the tech industry.\npreviewImage: https:\/\/source.unsplash.com\/A-NVHPka9Rk\/1920x1280<\/span>\n---\n\n# Top 5 Programming Languages to Learn<\/span>\n<HeroImage src=\"https:\/\/source.unsplash.com\/A-NVHPka9Rk\/1920x1280\"<\/span> alt={\"main image\"<\/span>} \/>\n\nProgramming languages are the backbone of the digital world, powering everything from websites and<\/span> mobile apps to data analysis and<\/span> artificial intelligence. With so many programming languages to choose from, it can be tough to know where to start. In this article, we'll discuss the top 5 programming languages to learn in 2023.\n{\/* omitted for brevity... *\/}<\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\ntitle<\/code>, description<\/code>, and previewImage<\/code>. That is a YAML frontmatter. If you are not familiar with this concept, a frontmatter is a section of metadata enclosed in triple-dashed lines ---<\/code> that appears at the beginning of a Markdown or MDX document. Typically, it is in YAML<\/a> format and provides useful information to describe the content stored in the Markdown\/MDX document.<\/p>\n\n\n\nHeroImage<\/code> component used inside the .mdx<\/code> file. That is a custom React component that will be rendered together with the content contained in the MDX file. You will learn how this is possible in the next steps.<\/p>\n\n\n\n
Each JSX element mentioned in .mdx<\/code> files must have a respective React component in the Next.js project. Add a components\/mdx<\/code> folder and prepare to write some custom MDX components. For example, this is the HeroImage<\/code> React file mentioned early:<\/p>\n\n\n\/\/ components\/mdx\/HeroImage.tsx<\/span>\n\nimport<\/span> React from<\/span> \"react\"<\/span>\nimport<\/span> Image from<\/span> \"next\/image\"<\/span>\n\nexport<\/span> default<\/span> function<\/span> HeroImage<\/span>({ src, alt }: { src: string; alt: string }<\/span>) <\/span>{\n return<\/span> (\n <div<\/span> className<\/span>={<\/span>\"mdx-hero-image<\/span>\"}><\/span>\n <Image<\/span> src<\/span>={src}<\/span> alt<\/span>={alt}<\/span> fill<\/span>><\/span><\/Image<\/span>><\/span>\n <\/div<\/span>><\/span><\/span>\n )\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\ndiv<\/code> that you can style as you wish. In particular, HeroImage<\/code> takes care of representing the main image associated with each article.<\/p>\n\n\n\nnext-mdx-remote<\/code> to render MDX content. For example, define a special H1<\/code> component for Markdown titles as below:<\/p>\n\n\n\/\/ components\/mdx\/H1.tsx<\/span>\n\nimport<\/span> React from<\/span> \"react\"<\/span>\n\nexport<\/span> default<\/span> function<\/span> H1<\/span>({ children }: { children?: React.ReactNode }<\/span>) <\/span>{\n return<\/span> <h1<\/span> className<\/span>=\"mdx-h1\"<\/span>><\/span>{children}<\/h1<\/span>><\/span><\/span>\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nH2<\/code> component for subtitles:<\/p>\n\n\n\/\/ components\/mdx\/H2.tsx<\/span>\n\nimport<\/span> React from<\/span> \"react\"<\/span>\n\nexport<\/span> default<\/span> function<\/span> P<\/span>({ children }: { children?: React.ReactNode }<\/span>) <\/span>{\n return<\/span> <h2<\/span> className<\/span>=\"mdx-h2\"<\/span>><\/span>{children}<\/h2<\/span>><\/span><\/span>\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nP<\/code> component for text paragraphs:<\/p>\n\n\n\/\/ components\/mdx\/P.tsx<\/span>\n\nimport<\/span> React from<\/span> \"react\"<\/span>\n\nexport<\/span> default<\/span> function<\/span> P<\/span>({ children }: { children?: React.ReactNode }<\/span>) <\/span>{\n return<\/span> <p<\/span> className<\/span>=\"mdx-p\"<\/span>><\/span>{children}<\/p<\/span>><\/span><\/span>\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nstyles\/global.css<\/code>:<\/p>\n\n\n.mdx-h1 {\n font-size: 52<\/span>px;\n color: #0d1d30;<\/span>\n}\n\n.mdx-h2 {\n font-size: 36<\/span>px;\n color: #0d1d30;<\/span>\n}\n\n.mdx-p {\n font-size: 20<\/span>px;\n margin-bottom: 1.5<\/span>em;\n line-height: