Next.js и Tumblr как CMS Часть 2: Получение данных

Я думал, что смогу начать серию постов, вскоре после этого жениться и не получить огромную задержку между ними. Это было слишком оптимистично. Но, наконец, вот мой второй пост об использовании Tumblr с Next.js. Ознакомьтесь с первой статьей, чтобы узнать, зачем нужен Tumblr, и поразмышлять об организации репозиториев, или продолжайте читать, чтобы узнать, как получить данные (со здоровой россыпью ошибок, которые я совершил и которых вам следует избегать).

Страницы

Предполагая, что вы уже загрузили приложение Next.js (если нет, следуйте инструкциям здесь), первым шагом будет выяснение того, какие страницы вам нужно будет создать заново, чтобы они соответствовали существующему Tumblr. Для базового блога каталог страниц должен выглядеть примерно так:

pages:
  ├── page:
  │   └── [page].js
  ├── post:
  │   └── [...id].js
  ├── tagged:
  │   ├── [tag]:
  │   │   └── page:
  │   │       └── [page].js
  │   └── [tag].js
  ├── 404.js
  └── index.js
Войти в полноэкранный режим Выход из полноэкранного режима

Если в вашем Tumblr есть пользовательские страницы, вы добавите их непосредственно в /pages. Следует помнить, что API Tumblr не поддерживает сохранение вопросов или сообщений пользователей, поэтому Next.js может оказаться не лучшим решением, если вам нужна такая функциональность.

Подключение к Tumblr

Мы будем использовать пакет NPM tumblr.js для подключения к API Tumblr. Установите его с помощью:

yarn add tumblr.js
Войти в полноэкранный режим Выйти из полноэкранного режима

Для аутентификации вам потребуется получить ключ потребителя OAuth, секрет потребителя, токен и секрет токена. Перейдите на сайт Tumblr и зарегистрируйте новое приложение, чтобы получить ключ потребителя и секрет потребителя. Не слишком напрягайтесь над этой формой, вы можете игнорировать все необязательные поля.

Получив эти значения, введите их в консоль API Tumblr и нажмите кнопку аутентификации, чтобы получить свои токены. Затем скопируйте все четыре и сохраните их в файл .env.local для использования в приложении Next.js:

TUMBLR_CONSUMER_KEY=****
TUMBLR_CONSUMER_SECRET=****
TUMBLR_TOKEN=****
TUMBLR_TOKEN_SECRET=****
Вход в полноэкранный режим Выход из полноэкранного режима

Если вам интересно, почему я рекомендую этот метод вместо использования fetch с ключом API, то это была одна из моих ранних ошибок. Все было хорошо, пока я не закончил новый сайт и не обновил видимость своего блога (скрыв его за пределами приборной панели Tumblr). В этот момент все мои запросы стали завершаться неудачей, потому что у меня больше не было соответствующих разрешений. Этот подход должен работать, даже если вы измените свои настройки.

Получение данных

Теперь напишем немного реального кода!

Начните с создания файла tumblr.js. Я держу его в папке utils, но вы можете поместить его куда угодно. Этот файл экспортирует метод find, который использует пакет, который мы установили, и секреты, сохраненные в предыдущем шаге, для создания клиента Tumblr и запроса записей в блоге. Вот базовый пример (замените «yourtumblr» на ваш Tumblr):

import tumblr from 'tumblr.js';

const CLIENT = {
  consumer_key: process.env.TUMBLR_CONSUMER_KEY,
  consumer_secret: process.env.TUMBLR_CONSUMER_SECRET,
  token: process.env.TUMBLR_TOKEN,
  token_secret: process.env.TUMBLR_TOKEN_SECRET,
  returnPromises: true
};

export async function find (limit = 10, page = 1, id, tag) {
  const client = tumblr.createClient(CLIENT);
  return await getPosts(client, limit, limit * (page - 1), id, tag);
}

function getPosts (client, limit, offset, id, tag) {
  return new Promise ((resolve) => {
    client.blogPosts('yourtumblr.tumblr.com', { limit, offset, id, tag })
      .then((response) => resolve(response))
      .catch(() => resolve({}));
  });
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Метод find принимает параметры limit, page number, post ID и tag, поэтому его можно повторно использовать на всех страницах Next.js, перечисленных выше.

Статические реквизиты и пути

Использование одного и того же метода find означает написание аналогичных блоков getStaticProps и getStaticPaths для каждой страницы, поэтому я просто пробегусь по index.js и post/[...id].js здесь. Если вам нужно больше примеров, посмотрите каталог pages в репозитории моего блога (хотя я делаю небольшой дополнительный парсинг постов, о котором я еще не упоминал).

Страница index.js использует параметры по умолчанию и довольно проста:

import { find } from '../utils/tumblr';

...

export async function getStaticProps () {
  const response = await find();

  return {
    props: response,
    revalidate: 3600
  };
}
Войти в полноэкранный режим Выход из полноэкранного режима

Все становится немного сложнее в post/[...id].js. Мы будем использовать инкрементную статическую регенерацию, чтобы избежать превышения лимита Tumblr в 300 вызовов API в минуту в процессе сборки. (Моя вторая ранняя ошибка: когда я только начинал, ISG был совсем новым, поэтому я пробовал другие обходные пути для ограничения запросов, например, адаптировал этот метод для глобального кэширования данных. Хотя технически это работало, это вызвало много дополнительных деплоев и неактуальных данных).

В приведенном ниже коде я статически генерирую 20 последних записей в моем блоге и перепроверяю их через час (3600 секунд):

import { find } from '../../utils/tumblr'; 

...

export async function getStaticPaths () {
  const response = await find(20);

  return {
    paths: response.posts.map((post) => {
      const params = new URL(post.post_url).pathname.replace('/post/', '').split('/');
      return { params: { id: [ params[0] , params[1] || '' ] }};
    }),
    fallback: 'blocking'
  };
}

export async function getStaticProps ({ params }) {
  const response = await find(1, 1, params.id[0]);

  if (!(response.posts || [])[0]) {
    return { notFound: true };
  }

  return {
    props: {
      post: response.posts[0]
    },
    revalidate: 3600
  };
}
Войти в полноэкранный режим Выход из полноэкранного режима

Вы можете варьировать количество постов на странице и время между перепроверками, чтобы понять, что подходит именно вам. Если Tumblr не может найти ни одного сообщения с текущим ID, вместо этого отображается страница 404.

На этом пока все! Далее речь пойдет о картах сайта и RSS.

Оцените статью
Procodings.ru
Добавить комментарий