Учебное пособие для начинающих, чтобы повысить уровень разработки Next.js с помощью MDX.

Веб-разработка прошла долгий путь с первых дней написания HTML и JavaScript для создания веб-сайтов.

Среди этих технологий и инструментов JSX является особенно примечательным расширением, которое приобрело широкую популярность как решение для создания иммерсивного и динамического веб-контента.

Однако по мере развития веб-разработки растет потребность в еще более мощных инструментах. Здесь на помощь приходит MDX, позволяющий разработчикам писать JSX непосредственно в файлах уценки.

В этом руководстве мы рассмотрим функции и преимущества MDX и покажем, как эффективно использовать его в проекте Next.js.

Итак, давайте погрузимся!

MDX: что это такое и почему вы должны его использовать?

Прежде чем углубляться в MDX, важно иметь четкое представление об основах.

Как мы упоминали во введении, MDX позволяет вам писать JSX непосредственно в ваших файлах уценки. JSX, что означает JavaScript XML, можно рассматривать как слияние JavaScript и HTML.

Его синтаксис выглядит следующим образом:

const element = <h1>Hello, world!</h1>;

Точно так же Markdown — это облегченный язык разметки, используемый для форматирования текста.

## [Locofy](https://www.locofy.ai/) converts your designs into production-ready code for different frameworks.

Таким образом, внутри MDX вы можете комбинировать уценку с JSX следующим образом:

# Hello, World!
This is a paragraph of regular Markdown text.
<MyComponent prop="value1">
This is a component written in JSX.
</MyComponent>

Но почему вы должны использовать MDX?

Мы знаем, что MDX — это мощный инструмент, сочетающий в себе преимущества компонентов Markdown и React.

Без сомнения, Markdown является популярным выбором для создания контента из-за его простоты и удобочитаемости, что позволяет вам сосредоточиться на содержании, а не на форматировании.

В то время как большинство программистов предпочитают подход уценки при написании сообщения в блоге, уценка не работает, когда дело доходит до создания динамического контента на основе интерактивности пользователя. Это ограничение привело к созданию MDX. Это расширение синтаксиса, которое позволяет вам использовать JSX, синтаксис, используемый React, непосредственно в ваших документах уценки.

С помощью MDX вы можете создавать и использовать свои собственные компоненты React непосредственно в разметке, что упрощает добавление интерактивности к вашему контенту. Это открывает целый мир возможностей для создания визуально привлекательных и интерактивных страниц.

Он имеет широкий спектр приложений, например, для создания контента на веб-сайтах документации, блогах, веб-сайтах электронной коммерции, учебных пособиях и онлайн-курсах и даже на целевых страницах.

Демистификация MDX: как это работает

Рассмотрим следующий код MDX:

import { Home } from './Home’;

# Welcome to Locofy!

Turn your designs into production-ready frontend code for mobile apps and web

<Home prop="value1" />

Этот код начинается с импорта пользовательского компонента React под названием «Home» из файла, расположенного в каталоге «Home».

Затем он включает заголовок Markdown, за которым следует абзац текста, а затем отображает компонент Home с реквизитом.

Когда этот код многомерных выражений компилируется, он преобразуется в код JavaScript, который может выполняться средой выполнения JavaScript, такой как веб-браузер. Результирующий код JavaScript может выглядеть примерно так:

import { Home } from './Home';
import { Fragment as _Fragment, jsx as _jsx } from 'react/jsx-runtime';

function MDXContent(props) {
  return _jsx(_Fragment, {
    children: [
      _jsx("h1", {
        children: "Welcome to Locofy!"
      }, void 0),
      _jsx("p", {
        children: "Turn your designs into production-ready frontend code for mobile apps and web"
      }, void 0),
      _jsx(Home, {
        prop: "value1"
      }, void 0)
    ]
  });
}

export default MDXContent;

Полученные элементы JSX затем отображаются как HTML в веб-браузере. Вот как работает код MDX.

Начало работы с многомерными выражениями в Next.js

Для начала давайте создадим приложение Next.js.

  1. Создайте приложение next.js с помощью следующей команды:
npx create-next-app mdx_app

После этого запустите приложение, чтобы убедиться, что оно работает правильно.

2. Установите необходимые пакеты:

npm install @next/mdx @mdx-js/loader @mdx-js/react

Эта команда устанавливает три пакета: @next/mdx, @mdx-js/loader и @mdx-js/react.

Эти пакеты обычно используются для включения использования синтаксиса MDX (Markdown + JSX) для создания динамического содержимого. @next/mdx — это специальный пакет Next.js для интеграции MDX, а @mdx-js/loader и @mdx-js/react — пакеты общего назначения для загрузки и рендеринга содержимого MDX.

3. Настройка Next.js для MDX

Теперь давайте настроим приложение Next.js, чтобы оно знало синтаксис многомерных выражений в приложении Next.js.

Для этого перейдите в файл «next.config.js» и вставьте приведенный ниже контент.

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    // If you use remark-gfm, you'll need to use next.config.mjs
    // as the package is ESM only
    // https://github.com/remarkjs/remark-gfm#install
    remarkPlugins: [],
    rehypePlugins: [],
    // If you use `MDXProvider`, uncomment the following line.
    // providerImportSource: "@mdx-js/react",
  },
})


/** @type {import('next').NextConfig} */
const nextConfig = {
  // Configure pageExtensions to include md and mdx
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
  // Optionally, add any other Next.js config below
  reactStrictMode: true,
}

// Merge MDX config with Next.js config
module.exports = withMDX(nextConfig)

Поскольку мы хотим запустить компонент React внутри файла MDX, создайте папку «components» и добавьте в нее файл «Hello.js». Затем вставьте приведенный ниже код в файл.

import React from 'react'
function Hello() {
   return (
       <h1>Hello, World</h1>
   );
}

export default Hello

4. Создание страниц MDX в Next.js

В каталоге ваших страниц создайте новый файл с именем page.mdx и вставьте нижеследующее содержимое.

import Hello from "../components/Hello.js"

export const name = 'Locofy'
export const title = 'We are from, ' + name + '!'

# {title}

## Here Is Our My MDX page

## - One
## - Two
## - Three

<Hello />

Как видите, мы используем MDX вместе с JSX внутри кода. После этого, когда вы запустите приложение Next, вы увидите результат, как и ожидалось.

Конечно, вы даже можете интегрировать MDX с Vue, Vite, Gatsby и другими фреймворками. Чтобы узнать больше о том, как это сделать, посетите здесь.

Расширение MDX: пользовательские компоненты и функциональность

Если вы используете содержимое MDX в своем приложении Next.js, возможно, вы захотите расширить его функциональные возможности за пределы параметров по умолчанию. К счастью, расширить MDX несложно. Чтобы начать работу, вот несколько примеров того, как вы можете расширить MDX:

  • Создание пользовательских компонентов. Вы можете создавать собственные компоненты и использовать их в файлах MDX. Существует также множество существующих компонентов React, таких как PaulieScanlon/mdx-embed и system-ui/theme-ui, которые вы можете использовать для добавления дополнительных функций.
  • Интеграция с другими подключаемыми модулями: MDX может легко интегрироваться с различными подключаемыми модулями remark и rehype, которые позволяют вам делать такие вещи, как выбор и сохранение блоков кода, изменение вывода блоков кода в формате HTML, и многое другое. Есть еще больше плагинов для изменения источников изображений, использования диаграмм и всего остального.

Более того, вы можете легко генерировать компоненты React для использования в MDX прямо из файла проекта с помощью Locofy.ai.

Вы можете использовать функцию автоматического макета в Figma, чтобы сделать ваши дизайны отзывчивыми в плагине Locofy.ai, и даже если ваши проекты не используют автоматические макеты, плагин предлагает функцию Оптимизатор дизайна, которая использует AI для применения автоматических макетов. в ваши файлы дизайна.

Как только ваш дизайн станет адаптивным, вы можете использовать функцию Автокомпоненты, чтобы разделить элементы дизайна на работающие компоненты React, что упростит их расширение.

Более того, вы можете синхронизировать или экспортировать отдельные компоненты, благодаря чему они легко помещаются в ваши файлы MDX.

Надеюсь, вам понравится.

Вот так — спасибо.

Рассмотрите возможность стать участником Medium, если вам нравится читать подобные истории и вы хотите помочь мне как писателю. Это стоит 5 долларов в месяц и дает вам неограниченный доступ к контенту Medium. Я получу небольшую комиссию, если вы зарегистрируетесь по моей ссылке.

Первоначально опубликовано на https://www.locofy.ai.