Agora para a conexão com o backend, nós vamos começar criando a url padrão do nosso backend, para acessarmos ele através do nosso front. Vamos criar na raiz do projeto um arquivo “.env”, e iremos criar a base da url.

NEXT_PUBLIC_BASEURL=http://localhost:3000

Agora vamos na pasta “services”, dentro de “src”. Aqui nós iremos criar um arquivo chamado “api.ts”, e iremos fazer a conexão com a api aqui.

Mas antes de começarmos a conexão, nós precisamos instalar o axios, pois usaremos o axios para fazer essa comunicação com o back.

npm install axios

Agora dentro do arquivo “api.ts” nós vamos importar o axios.

import axios from "axios";

Com o axios importado, nós vamos criar uma constante para a url base, e vamos pegar ela do env. Depois vamos usar o axios para conectar com essa url base e vamos exportar.

import axios from "axios";

const baseURL = process.env.NEXT_PUBLIC_BASEURL;

const api = axios.create({
  baseURL,
});

export default api;

Agora nós faremos o serviço do curso. Esse serviço vai conter os métodos que usaremos para buscar coisas relacionadas a cursos, tipo categorias.

Vamos então dentro da pasta “services” criar um arquivo chamado “courseService.ts”, e iremos começar importando a api. Em seguida nós iremos criar um tipo para o curso, iremos informar as coisas que vão vir de curso o que eles são, nesse caso, quase tudo é string.

import api from "./api";

export type CourseType = {
  id: number;
  name: string;
  thumbnailUrl: string;
  synopsis: string;
};

Agora, sabemos que o curso tem episódios, isso significa que vamos também fazer um tipo para os episódios, informando as coisas que vem do episódio. Nós iremos criar esse “EpisodeType” acima do “CourseType”, pois nós iremos usar o tipo do episódio dentro do curso.

export type EpisodeType = {
  id: number;
  name: string;
  synopsis: string;
  order: number;
  videoUrl: string;
  secondsLong: number;
};
export type CourseType = {
  id: number;
  name: string;
  thumbnailUrl: string;
  synopsis: string;
};

Agora iremos colocar episódios dentro do tipo do curso. Os episódios são opcionais, pois nem todo curso tem episódio, então vamos botar uma “?”, e os episódios vão vir dentro de um array, então nós vamos também informar isso.

export type EpisodeType = {
  id: number;
  name: string;
  synopsis: string;
  order: number;
  videoUrl: string;
  secondsLong: number;
};
export type CourseType = {
  id: number;
  name: string;
  thumbnailUrl: string;
  synopsis: string;
  episodes?: EpisodeType[];
};

Agora nós iremos criar um objeto chamado “courseService”, e é dentro dele onde iremos criar os nossos métodos, que são funções.

const courseService = {
};

export default courseService

Agora iremos criar um método, que será uma função assíncrona, que vai ter um “get”, passando a url que fizemos no backend. Esse método ele vai pegar os lanaçamentos, por isso iremos usar o “api.get”

const courseService = {
  getNewestCourses: async () => {
    const res = await api.get("/courses/newest").catch((error) => {
      console.log(error.response.data.message);

      return error.response;
    });

    return res;
  },
};

export default courseService