Next.js - промежуточное ПО и режим предварительного просмотра

Мы можем легко создавать серверные приложения React и статические сайты Next.js.

В этой статье мы рассмотрим промежуточное ПО маршрутизации и режим предварительного просмотра с Next.js.

Поддержка промежуточного программного обеспечения Connect / Express

Мы можем использовать связующее ПО, совместимое с Connect.

Например, мы можем добавить промежуточное ПО cors, установив его и добавив в наше приложение Next.js.

Для его установки запускаем:

npm i cors

or

yarn add cors

Затем мы можем добавить его в наш маршрут API, написав:

import Cors from 'cors'
const cors = Cors({
  methods: ['GET', 'HEAD'],
})
function runMiddleware(req, res, fn) {
  return new Promise((resolve, reject) => {
    fn(req, res, (result) => {
      if (result instanceof Error) {
        return reject(result)
      }
      return resolve(result)
    })
  })
}
async function handler(req, res) {
  await runMiddleware(req, res, cors)
  res.json({ message: 'hello world' })
}
export default handler

Мы импортировали функцию Cors.

Затем мы используем его для создания cors промежуточного программного обеспечения.

Мы можем указать методы запроса, которые можно использовать с маршрутом.

Функция runMiddleware запускает промежуточное программное обеспечение, вызывая fn функцию промежуточного программного обеспечения, а затем разрешает result в случае успеха.

В противном случае обещание отклоняется.

handler - это обработчик маршрута, который запускает промежуточное ПО и затем возвращает ответ.

Помощники ответа

Next.js поставляется с различными помощниками ответа.

Метод res.status(code) позволяет нам установить код состояния ответа.

code - это код состояния HTTP.

res.json(json) позволяет нам отправить ответ в формате JSON.

json - допустимый объект JSON.

res.send(body) позволяет нам отправлять HTTP-ответ, где body - строка, объект или буфер.

res.redirect принимает необязательные status и path, чтобы позволить нам перенаправлять на определенный путь или URL.

Значение по умолчанию status - 307.

Например, мы можем вызвать их, написав:

export default (req, res) => {
  res.status(200).json({ name: 'hello' })
}

Их можно связать вместе.

Режим предварительного просмотра

Мы можем предварительно просмотреть маршруты, которые создаются статически.

В Next.js есть функция предварительного просмотра, чтобы решить эту проблему.

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

Чтобы использовать его, мы вызываем метод res.setPreviewData для предварительного просмотра.

Например, мы можем написать:

export default (req, res) => {
  res.setPreviewData({})
  res.end('Preview mode')
}

чтобы включить его.

Безопасный доступ к данным

Мы можем получить доступ к данным, записав их из маршрута предварительного просмотра и отправив на нашу страницу.

Для этого мы создаем маршрут API предварительного просмотра, создав файл pages/api/preview.js:

export default async (req, res) => {
  const response = await fetch(`https://yesno.wtf/api`)
  const data = await response.json();
  res.setPreviewData(data)
  res.redirect('/post')
}

Мы получаем данные из API и вызываем setPreviewData, чтобы получить их из функции getStaticProps в файле JavaScript нашей страницы.

Затем мы перенаправляем в наш файл, чтобы увидеть данные на нашей странице.

В pages/post.js мы пишем:

function Post({ data }) {
  return (
    <div>{data && data.answer}</div>
  )
}
export async function getStaticProps(context) {
  if (context.preview) {
    return {
      props: {
        data: context.previewData
      }
    }
  }
  return { props: { data: { answer: 'not preview' } } }
}
export default Post

Мы проверяем, включен ли режим предварительного просмотра, проверяя свойство context.preview.

Если это true, то мы получаем данные предварительного просмотра от context.previewData.

Затем мы отображаем data в нашем Post компоненте.

Заключение

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

Кроме того, мы можем использовать промежуточное ПО Connect или Express в наших приложениях Next.js.

Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал YouTube!