Можно ли использовать маршруты API для создания страниц в Next.JS getStaticProps/getStaticPaths?

Question

Я создаю статическое приложение Next.JS с MongoDB.

Могу ли я использовать маршруты API для создания страниц в моем статическом приложении Next.JS? Например, используя метод GET для получения товаров в getStaticProps? Или это плохой подход.

Теперь я использую классический способ из документации (прямые вызовы db, например так далее).

Спасибо за любую помощь заранее!

Answer 1

Вероятно, вы можете, но использовать маршруты API в getStaticProps / getStaticPaths, как указано в документации , - плохая практика .

Вы не должны получать маршрут API из getStaticProps - вместо этого вы можете написать код на стороне сервера непосредственно в getStaticProps.

Примечание. Не следует использовать fetch() для вызова маршрута API в getServerSideProps. Вместо этого напрямую импортируйте логику, используемую в вашем маршруте API. Для этого подхода вам может потребоваться небольшой рефакторинг вашего кода. Получение из внешнего API - это нормально!

Answer 2

Как отмечает в своем ответе Роман, это не идеально.

Однако вы можете использовать getStaticPropsдля получения необходимых документов из вашей базы данных. Если бы вы динамически отображали классический вариант использования профилей использования, он бы выглядел как следующий псевдокод, и предполагая, что у вас есть какой-то Model для взаимодействия с вашим MongoDb:

      // under app/pages/users/[userId].js

import UserProfile from 'components/user-profile';
import User from 'models/user';

export default UserProfile;

// both at request time and build time, preps the props passed to the UserProfile component.
export const getStaticProps = async ({params}) => {
  const user = await User.find(params.id);
  return { 
    props: { user }
  }
}

Бонусный трек: если ваш вариант использования его поддерживает, превратить его в статически сгенерированный сайт довольно просто:

      // instructs next to render all user profiles using SSG
export const getStaticPaths = async () => {
  const users = await User.findAll();
  const paths = users.map(user => `/users/${user.id}`);
  return { paths, fallback: false }; 
}