Получение локальных и производственных на Vercel

У меня действительно серьезный вопрос о Vercel (NextJS), на который я не нашел ответа.

Я пытаюсь развернуть проект на Versel и использую некоторые структуры для получения данных из API, например:

export async function getStaticProps(context) {
  const route = process.env.APIpath + 'api/category/getCategories'; //focusing here, ok on localhost
  const res = await fetch(route)
  const json = await res.json()
  return {
    props: {
      data: json,
      },
  };
}

Поскольку fetch использует только абсолютный URL-путь, мне нужно определить базовый URL-адрес с переменной process.env.APIpath.

При локальном тестировании у меня process.env.APIpath = 'http://localhost:3000/' но: мне нужно определить производственную переменную для развертывания Vercel, и я использую бессерверные функции.

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

//this code triggers an error as code shown above, ok on localhost
const res = await fetch(process.env.APIpath + 'api/category/getCategory?_id='+ pid, {
    method: 'post',
    body: JSON.stringify(values, null, 2)
})

Я получаю ошибки из-за fetch. Конечно, я понимаю, что во время развертывания Vercel не может собрать производственную версию, поскольку я использую жестко запрограммированный process.env.APIpath.

Как я могу четко определить process.env.APIpath (или любые другие встроенные переменные) для развертывания проекта? Обратите внимание, что каждый раз, когда Versel генерирует общую ссылку на проект как nextjs-fhp5exsvo-testing.vercel.app.

P.S. Буду рад любой помощи, проблема с развертыванием уже около 5 дней.


reactjs deployment fetch next.js vercel
person ChilTest    schedule 08.06.2021    source источник
comment
Это приложение CRA или Next.js?   -  person paulogdm    schedule 08.06.2021
comment
Следующее приложение js. (сейчас добавлю некоторую информацию для публикации)   -  person ChilTest    schedule 08.06.2021
comment
Вы не должны выполнять вызовы внутренних маршрутов API в getStaticProps. Вместо этого напрямую импортируйте логику, используемую внутри вашего маршрута API: Внутренний API получить с помощью getServerSideProps? (Next.js) (упоминается getServerSideProps, но то же самое относится и к getStaticProps).   -  person juliomalves    schedule 08.06.2021
comment
Спасибо, но ваш комментарий мешает получить, я действительно не могу его использовать.   -  person ChilTest    schedule 09.06.2021

Ответы (1)


arrow_upward
0
arrow_downward

Как я частично решил свою проблему

Вместо использования getStaticProps и getServerSideProps для получения данных из API я использую библиотеку useSWR. Это решение подходит для версий local и production.

1. Измените на useSWR вместо getStaticProps

не работает код с getStaticProps

export async function getStaticProps(context) {
  const route = process.env.APIpath + 'api/category/getCategories'; 
  const res = await fetch(route)
  const json = await res.json()
  return {
    props: {
      data: json,
      },
  };
}

изменен на useSWR, рабочий пример для local, test и production

import useSWR from 'swr'
import React from 'react';

//important to return only result, not Promise
const fetcher = (url) => fetch(url).then((res) => res.json());

const Categories = () => {
 //getting data and error
 const { data, error } = useSWR('/api/category/getCategories', fetcher)
 if (error) return <div>Failed to load</div>
 if (!data) return <div>Loading...</div>
 if (data){
   // {data} is completed, it's ok!
   //your code here to make something with {data}
   return (
      <div>
      //something here, example {data.name}
      </div>
   )
 }
}

export default Categories

Примечание: я не уверен, что useSWR будет идеально работать с SEO, но согласно этой ссылке, мы можем использовать его даже с SSR.

2. Изменение настроек MongoDB.

Поскольку я использую mongoDB, вам нужно check MongoDB settings правильно. Как только вы это сделаете, вам нужно, чтобы check your API routes (не страницы) находились в /pages/api/[apiname].js. Только после того, как маршруты API заработают (на Vercel), я предлагаю вам начать кодировать свою локальную версию.

3. Измените свой deployment variables на Vercel.

Вам необходимо настроить переменные среды и некоторые другие на Vercel. Подробнее здесь

person ChilTest    schedule 09.06.2021