Как создать блог с помощью Next и MDX

Next.js — это платформа React, которая позволяет быстро создавать статические и динамические приложения. Он готов к работе и поддерживает рендеринг на стороне сервера и создание статических сайтов из коробки, что делает приложения Next.js быстрыми и оптимизированными для SEO.

В этом уроке я сначала объясню, что такое Next.js и почему вы должны использовать его вместо Create React App или Gatsby. Затем я покажу вам, как создать блог, в котором вы сможете писать и отображать сообщения, используя Next.js и MDX.

Для начала вам понадобится некоторый опыт работы с React. Знание Next.js будет полезным, но не обязательным. Этот учебник будет полезен тем, кто хочет создать блог (личный или организационный) с помощью Next.js или все еще ищет, что использовать.

Давайте погрузимся.

Что такое Next.js?

Next.js — это фреймворк React, созданный и поддерживаемый Vercel. Он создан с использованием React, Node.js, Babel и Webpack. Он готов к работе, потому что имеет множество замечательных функций, которые обычно устанавливаются в «ванильном» приложении React.

Платформа Next.js может отображать приложения на сервере или экспортировать их статически. Он не ждет, пока браузер загрузит JavaScript, чтобы отобразить контент, что делает приложения Next.js оптимизированными для SEO и молниеносно быстрыми.

Зачем использовать Next.js вместо создания приложения React?

Create React App — это удобный инструмент, который предлагает современную настройку сборки без настройки и без необходимости настраивать Webpack, Babel и т. д. или поддерживать их зависимости. В настоящее время это рекомендуемый способ создания приложений React. Он имеет шаблон для TypeScript, а также поставляется с библиотекой тестирования React.

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

Это именно та проблема, которую Next.js призван решить. Он предлагает лучший опыт разработки и все, что вам нужно для производства. Он поставляется с несколькими интересными функциями:

• Статический экспорт (пререндеринг)
  Next.js позволяет экспортировать ваше приложение Next.js во время сборки в статический HTML, который работает без сервера. Это рекомендуемый способ создания веб-сайта, поскольку он выполняется во время сборки, а не при каждом запросе.
• Рендеринг на стороне сервера (предварительный рендеринг)
  Он предварительно отображает страницы в HTML на сервере при каждом запросе.
• Автоматическое разделение кода
  В отличие от React, Next.js автоматически разбивает код и загружает только необходимый JavaScript, что делает приложение быстрым.
• Маршрутизация на основе файловой системы
  Next.js использует файловую систему для включения маршрутизации в приложении, а это означает, что каждый файл в каталоге pages будет автоматически рассматриваться как маршрут.
• Горячая перезагрузка кода
  Next.js полагается на React Fast Refresh для горячей перезагрузки кода, предлагая отличные возможности для разработчиков.
• Варианты укладки
  Фреймворк Next.js имеет встроенную поддержку Styled JSX, модулей CSS, Sass, LESS и многого другого.

Next.js против Гэтсби

Gatsby — это генератор статических сайтов, построенный на основе React и GraphQL. Он популярен и имеет огромную экосистему, которая предоставляет темы, плагины, рецепты и так далее.

Веб-сайты Gatsby и Next.js работают очень быстро, потому что оба они отображаются либо на сервере, либо статически, а это означает, что код JavaScript не ждет загрузки браузера. Давайте сравним их по опыту разработчиков.

С Gatsby легко начать, особенно если вы уже знакомы с React. Однако Gatsby использует GraphQL для запроса локальных данных и страниц. Использование Gatsby для создания этого простого блога может быть излишним, поскольку GraphQL требует обучения, а время запросов и создания статических страниц будет немного больше. Если вы создали один и тот же блог дважды, сначала с помощью Gatsby, а затем с помощью Next.js, тот, который был создан с помощью Next.js, будет намного быстрее во время сборки, поскольку он использует обычный JavaScript для запроса локальных данных и страниц.

Я надеюсь, вы воспользуетесь преимуществами платформы Next.js и поймете, почему она намного удобнее, чем некоторые альтернативы. Это также отличный выбор, если ваш веб-сайт в значительной степени зависит от SEO, потому что ваше приложение будет быстрым и легким для сканирования роботами Google. Вот почему в этой статье мы будем использовать Next.js для создания блога с библиотекой MDX.

Начнем с настройки нового приложения Next.js.

Настройка

Есть два способа создать приложение Next.js. Мы можем настроить новое приложение вручную или использовать «Создать следующее приложение». Мы выберем последний, потому что это рекомендуемый способ, и он автоматически все настроит для нас.

Чтобы запустить новое приложение, выполните следующее в интерфейсе командной строки (CLI):

 npx create-next-app

После инициализации проекта давайте структурируем приложение Next.js следующим образом:

 src ├── components | ├── BlogPost.js | ├── Header.js | ├── HeadPost.js | ├── Layout.js | └── Post.js ├── pages | ├── blog | | ├── post-1 | | | └── index.mdx | | ├── post-2 | | | └── index.mdx | | └── post-3 | | └── index.mdx | ├── index.js | └── \_app.js ├── getAllPosts.js ├── next.config.js ├── package.json ├── README.md └── yarn.lock

Как видите, наш проект имеет простую файловую структуру. Следует отметить три вещи:

• _app.js позволяет нам добавлять некоторый контент к компоненту App.js , чтобы сделать его глобальным.
• getAllPosts.js помогает нам получать записи блога из папки pages/blog . Кстати, вы можете назвать файл как хотите.
• next.config.js — это файл конфигурации для нашего приложения Next.js.

Я вернусь к каждому файлу позже и объясню, что он делает. А пока давайте посмотрим на пакет MDX.

Установка библиотеки MDX

MDX — это формат, который позволяет нам беспрепятственно писать JSX и импортировать компоненты в наши файлы Markdown. Это позволяет нам писать обычный Markdown и встраивать компоненты React в наши файлы.

Чтобы включить MDX в приложении, нам нужно установить библиотеку @mdx-js/loader . Для этого давайте сначала перейдем в корень проекта, а затем запустим эту команду в CLI:

 yarn add @mdx-js/loader

Или, если вы используете npm:

 npm install @mdx-js/loader

Затем установите @next/mdx — библиотеку, специфичную для Next.js. Запустите эту команду в CLI:

 yarn add @next/mdx

Или, для нпм:

 npm install @next/mdx

Здорово! Мы закончили настройку. Давайте запачкаем руки и напишем что-нибудь осмысленное.

Настройка файла next.config.js

 const withMDX = require("@next/mdx")({ extension: /\.mdx?$/ }); module.exports = withMDX({ pageExtensions: ["js", "jsx", "md", "mdx"] });

Ранее в этом руководстве я говорил, что файлы в папке pages будут обрабатываться Next.js как страницы/маршруты во время сборки. По умолчанию Next.js просто выбирает файлы с расширениями .js или .jsx . Вот почему нам нужен файл конфигурации, чтобы добавить некоторые настройки к поведению Next.js по умолчанию.

Файл next.config.js сообщает платформе, что файлы с расширениями .md или .mdx также следует рассматривать как страницы/маршруты во время сборки, поскольку папка blog , содержащая статьи, находится в каталоге pages .

При этом мы можем начать получать сообщения в блоге в следующей части.

Получение сообщений блога

Одна из причин, по которой создание блога с помощью Next.js легко и просто, заключается в том, что вам не нужен GraphQL или что-то подобное для получения локальных сообщений. Вы можете просто использовать обычный JavaScript для получения данных.

В getAllPosts.js :

 function importAll(r) { return r.keys().map((fileName) => ({ link: fileName.substr(1).replace(/\/index\.mdx$/, ""), module: r(fileName) })); } export const posts = importAll( require.context("./pages/blog/", true, /\.mdx$/) );

Сначала этот файл может пугать. Это функция, которая импортирует все MDX-файлы из папки pages/blog и для каждого сообщения возвращает объект с путем к файлу без расширения ( /post-1 ) и данными сообщения в блоге.

Имея это на месте, теперь мы можем создавать компоненты, чтобы стилизовать и отображать данные в нашем приложении Next.js.

Создание компонентов

В components/Layout.js :

 import Head from "next/head"; import Header from "./Header"; export default function Layout({ children, pageTitle, description }) { return ( <> <Head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charSet="utf-8" /> <meta name="Description" content={description}></meta> <title>{pageTitle}</title> </Head> <main> <Header /> <div className="content">{children}</div> </main> </> ); }

Здесь у нас есть компонент Layout , который мы будем использовать в качестве оболочки для блога. Он получает метаданные для отображения в заголовке страницы и отображаемый компонент.

В components/Post.js :

 import Link from 'next/link' import { HeadPost } from './HeadPost' export const Post = ({ post }) => { const { link, module: { meta }, } = post return ( <article> <HeadPost meta={meta} /> <Link href={'/blog' + link}> <a>Read more →</a> </Link> </article> ) }

Этот компонент отвечает за отображение предварительного просмотра сообщения в блоге. Он получает объект post для отображения в качестве реквизита. Затем мы используем деструктурирование, чтобы извлечь link на пост и meta для отображения из объекта. Теперь мы можем передавать данные компонентам и обрабатывать маршрутизацию с помощью компонента Link .

В components/BlogPost.js :

 import { HeadPost } from './HeadPost' export default function BlogPost({ children, meta}) { return ( <> <HeadPost meta={meta} isBlogPost /> <article>{children}</article> </> ) }

Компонент BlogPost помогает нам отображать одну статью. Он получает сообщение для показа и его meta .

До сих пор мы рассмотрели многое, но у нас нет статей для показа. Давайте исправим это в следующем разделе.

Написание сообщений с помощью MDX

 import BlogPost from '../../../components/BlogPost' export const meta = { title: 'Introduction to Next.js', description: 'Getting started with the Next framework', date: 'Aug 04, 2020', readTime: 2 } export default ({ children }) => <BlogPost meta={meta}>{children}</BlogPost>; ## My Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus pellentesque dolor non egestas. In sed tristique elit. Cras vehicula, nisl vel ultricies gravida, augue nibh laoreet arcu, et tincidunt augue dui non elit. Vestibulum semper posuere magna, quis molestie mauris faucibus ut.

Как видите, мы импортируем компонент BlogPost , который получает meta и тело поста.

children параметр — это тело сообщения в блоге или, если быть точным, все, что идет после meta . Это функция, отвечающая за рендеринг поста.

С этим изменением мы можем перейти к файлу index.js и отображать записи на домашней странице.

Отображение сообщений

 import { Post } from "../components/Post"; import { posts } from "../getAllPosts"; export default function IndexPage() { return ( <> {posts.map((post) => ( <Post key={post.link} post={post} /> ))} </> ); }

Здесь мы начинаем с импорта компонента Post и сообщений, извлеченных из папки blog . Затем мы просматриваем массив статей и для каждого сообщения используем компонент Post для его отображения. После этого мы можем получать сообщения и отображать их на странице.

Мы почти закончили. Однако компонент Layout по-прежнему не используется. Мы можем использовать его здесь и обернуть им наши компоненты. Но это не повлияет на страницы статей. Вот где в игру вступает файл _app.js . Давайте использовать это в следующем разделе.

Использование файла _app.js

Здесь символ подчеркивания ( _ ) действительно важен. Если вы его не укажете, Next.js будет рассматривать файл как страницу/маршрут.

 import Layout from "../components/Layout"; export default function App({ Component, pageProps }) { return ( <Layout pageTitle="Blog" description="My Personal Blog"> <Component {...pageProps} /> </Layout> ); }

Next.js использует компонент App для инициализации страниц. Цель этого файла — переопределить его и добавить в проект некоторые глобальные стили. Если у вас есть стили или данные, которые необходимо использовать в проекте, разместите их здесь.

Теперь мы можем просмотреть папку проекта в CLI и выполнить следующую команду для предварительного просмотра блога в браузере:

 yarn dev

Или в нпм:

 npm run dev

Если вы откроете https://localhost:3000 в браузере, вы сможете увидеть это:

Здорово! Наш блог выглядит хорошо. Мы закончили создание приложения для блога с помощью Next.js и MDX.

Заключение

В этом руководстве мы рассмотрели Next.js, создав блог с помощью библиотеки MDX. Фреймворк Next.js — это удобный инструмент, который делает приложения React оптимизированными для SEO и быстрыми. Его можно использовать для быстрого создания статических, динамических веб-сайтов JAMstack, потому что он готов к работе и обладает некоторыми приятными функциями. Next.js широко используется крупными компаниями, и его производительность постоянно улучшается. Это определенно то, что нужно проверить для вашего следующего проекта.

Вы можете предварительно просмотреть готовый проект в CodeSandbox.

Спасибо за прочтение!

Ресурсы

Эти полезные ресурсы выведут вас за рамки данного руководства.

• Документация Next.js
• Документация Next.js и MDX
• «Создайте приложение Next.js», Next.js