Создание блога с помощью Next.js

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Идея состоит в том, чтобы как можно теснее спроектировать структуру вокруг этой структуры каталогов, чтобы было проще перенести блог из Jekyll, просто повторно используя записи и настройки, определенные в блоге.

Монтаж

Next.js построен на React и написан в Node.js. Поэтому нам нужно сначала установить npm, перед добавлением в проект next, react и react-dom.

Чтобы запустить скрипты Next.js из командной строки, мы должны добавить команду next в раздел scripts файла package.json.

Теперь мы можем запустить в первый раз в командной строке npm run dev. Давай посмотрим что происходит.

Компилятор жалуется на отсутствующий каталог страниц в корне проекта. Мы узнаем о концепции страниц в следующем разделе.

Концепция страниц

Next.js построен на концепции страниц. Каждая страница является компонентом React, который может иметь тип .js или .jsx, это сопоставляется с маршрутом на основе имени файла. Например:

Давайте создадим в корне проекта каталог pages и заполним нашу первую страницу index.js базовым компонентом React.

Выполните npm run dev еще раз, чтобы запустить сервер, и перейдите в браузере http://localhost:3000, чтобы впервые увидеть свой блог.

Создание блога с помощью Next.js

Из коробки мы получаем:

Горячая перезагрузка, поэтому нам не нужно обновлять браузер при каждом изменении кода.

Статическая генерация всех страниц внутри каталога /pages/**.

Статический файл, служащий для активов, находящихся в каталоге /public/**.

Страницы ошибки 404.

Перейдите к произвольному пути на localhost, чтобы увидеть страницу 404 в действии. Если вам нужна пользовательская страница 404, в документации Next.js есть отличная информация.

Создание блога с помощью Next.js

Динамические страницы

Страницы со статическими маршрутами полезны для создания домашней страницы, страницы «О нас» и т. д. Однако для динамического построения всех наших сообщений мы будем использовать возможности динамических маршрутов Next.js. Например:

Любой маршрут, например /posts/1, /posts/abc и т. д., будет сопоставлен с /posts/[slug].js, а параметр slug будет отправлен на страницу в качестве параметра запроса. Это особенно полезно для постов в блоге, потому что мы не хотим создавать один файл на пост; вместо этого мы могли бы динамически передать слаг для рендеринга соответствующего поста.

Структура блога

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

API блога

Базовая структура блога требует двух функций API:

Функция для извлечения метаданных всех постов в каталоге _posts

Функция для извлечения одного поста для данного slug с полным HTML и метаданными

По желанию, мы также хотели бы, чтобы вся конфигурация сайта, определенная в config.yml, была доступна для всех компонентов. Поэтому нам нужна функция, которая будет анализировать конфигурацию YAML в нативный объект.

Поскольку мы будем иметь дело со многими файлами, не относящимися к JavaScript, такими как Markdown (.md), YAML (.yml) и т. д., мы будем использовать библиотеку raw-loader для загрузки таких файлов в виде строк, чтобы упростить их обработку.

Далее нам нужно указать Next.js использовать raw-loader при импорте форматов файлов .md и .yml путем создания файла next.config.js в корне проекта (подробнее об этом).

Next.js 9.4 представил псевдонимы для относительного импорта, который помогает очистить спагетти оператора импорта, вызванные относительными путями. Чтобы использовать псевдонимы, создайте файл jsconfig.json в корневом каталоге проекта, указав базовый путь и все псевдонимы модулей, необходимых для проекта.

Например, это позволяет нам импортировать макеты, просто используя:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Получение всех постов

Эта функция будет читать все файлы Markdown в каталоге _posts, анализировать основной материал, определенный в начале поста, с использованием gray-matter и возвращать массив метаданных для всех постов.

Стандартный пост в Markdown выглядит так:

Раздел, обозначенный меткой —, называется основным материалом, который содержит метаданные поста, такие как заголовок, постоянная ссылка, теги и т. д. Вот вывод:

Убедитесь, что вы сначала установили библиотеку gray-matter из npm, используя команду npm install gray-matter —save-dev.

Получение одного поста

Для данного слага эта функция найдет файл в каталоге _posts, проанализирует Markdown с помощью библиотеки marked и вернет выходной HTML с метаданными.

Пример вывода:

Сначала убедитесь, что вы установили библиотеку marked из npm, используя команду npm install marked —save-dev.

Конфигурация

Чтобы повторно использовать конфигурацию Jekyll для нашего блога на Next.js, мы проанализируем файл YAML с помощью библиотеки js-yaml и экспортируем эту конфигурацию, чтобы ее можно было использовать для компонентов.

Убедитесь, что вы сначала установили из npm js-yaml, используя команду npm install js-yaml —save-dev.

Включения

Каталог _includes содержит два основных компонента React, <Header> и <Footer>, которые будут использоваться в различных компонентах макета, определенных в каталоге _layouts.

Макеты

У нас есть два компонента макета в каталоге _layouts. Одним из них является <DefaultLayout>, который является базовым макетом, поверх которого будут построены все остальные компоненты макета.

Второй макет — это компонент <PostLayout>, который переопределяет заголовок, заданный в заголовке поста <DefaultLayout>, и отображает HTML-код поста. Он также содержит ссылку на домашнюю страницу.

next/head является встроенным компонентом для добавления элементов в head страницы. next/link является встроенным компонентом, который обрабатывает переходы на стороне клиента между маршрутами, определенными в каталоге страниц.

Главная страница

Как часть главной страницы, или домашней страницы, мы выведем перечень всех постов внутри каталога _posts. Список будет содержать заголовок поста и постоянную ссылку на страницу отдельного поста. Страница индекса будет использовать <DefaultLayout> и мы импортируем конфигурацию на главную страницу, чтобы передать в макет title и description.

getStaticProps вызывается во время сборки для предварительного рендеринга страниц, передавая props компоненту страницы по умолчанию. Мы используем эту функцию для получения списка всех постов во время сборки и рендеринга архива постов на главной странице.

Создание блога с помощью Next.js

Страница поста

На этой странице будет отображаться заголовок и содержание поста для slug предоставленного, как часть context. Страница поста будет использовать компонент <PostLayout>.

Если страница имеет динамические маршруты, Next.js должен знать во время сборки все возможные пути. getStaticPaths предоставляет список путей, которые должны быть отображены в HTML во время сборки. Свойство fallback гарантирует, что если вы посетите маршрут, которого нет в списке путей, он вернет страницу 404.

Создание блога с помощью Next.js

Подготовка к производству

Добавьте следующие команды для build и start в package.json, раздел scripts, а затем запустите npm run build, затем npm run start, чтобы собрать статический блог и запустить сервер производства.

Весь исходный код этой статьи доступен в репозитории GitHub. Вы можете клонировать его локально и поэкспериментировать. Репозиторий также включает в себя некоторые основные заполнители для применения CSS к вашему блогу.

Улучшения

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

Пагинация

Подсветка синтаксиса

Категории и теги для постов

Стайлинг

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

Автор: Pankaj Parashar

Источник: https://css-tricks.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Full-Stack практика. Создание JavaScript блога

Создание веб-приложения с нуля на JavaScript, NodeJS, ExpressJS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.