Agora nós vamos em “homeNoAuth” criar uma pasta chamada “slideSection”, e nela nós iremos colocar a seção desses slides.

import styles from "./styles.module.scss";

const SlideSection = function () {
  return <></>;
};

export default SlideSection;

Nós iremos criar uma interface de props para essa seção, pois nós vamos buscar do backend esses lançamentos de forma estática, faremos então um “getStaticProps”, e iremos enviar para cá.

interface props {
  newestCourses: CourseType[];
}

const SlideSection = function ({ newestCourses }: props) {
  return <></>;
};

export default SlideSection;

Nós vamos então colocar um container envolvendo nosso conteúdo. Nós iremos ter um título, o “slideComponent” que criamos, que vai receber a nossa props e um botão, que vai chamar a pessoa para se registrar.

<>
	<Container fluid>
		<p className={styles.sectionTitle}>AULAS JÁ DISPONÍVEIS</p>
		<SlideComponent course={newestCourses} />
		<Link href="/register">
			<Button outline color="light" className={styles.slideSectionBtn}>Se cadastre para acessar!</Button>
		</Link>
	</Container>
</>

Nós vamos agora importar essa nossa seção em “index.tsx”, para depois passarmos o curso através de props também.

<>
	<main>
		<div className={styles.sectionBackground}>
			<HeaderNoAuth />
			<PresentationSection />
		</div>
		<CardsSection />
		<SlideSection newestCourses={}/>
	</main>
</>

Agora, nós iremos fazer a estrutura do staticProps

export const getStaticProps: GetStaticProps = async () => {
};

Agora nós iremos fazer um res, que vai receber o nosso serviço e o nosso método, e vamos passar dentro do return “props”, e dentro de “props” nós vamos passar o curso recebendo o resultado desse nosso método.

export const getStaticProps: GetStaticProps = async () => {
  const res = await courseService.getNewestCourses();
  return {
    props: {
      course: res.data,
    },
  };
};

Agora vamos criar uma interface, que vai ter props, passaremos primeiro o “reactNode”, para nós puxarmos a informação vindo desse “getStaticProps”

interface IndexPageProps {
  children?: ReactNode;
  course: CourseType[];
}

Nós vamos então colocar isso na nossa função e também vamos passar como argumento da seção que importamos.

const homeNoAuth = function ({ course }: IndexPageProps) {

<SlideSection newestCourses={course} />

Nós temos agora essa página sendo estática. Nós sabemos que os cursos novos não são atualizados todos os dias, então nós vamos implementar o ISR, que significa “Incremental Static Regeneration”. Com o ISR nós iremos colocar um tempo que a página vai fazer uma nova chamada no backend para ver se algo foi modificado, e se for, vai atualizar na página.

Nós vamos colocar uma verificação em segundos. Mas nós sabemos que uma hora tem 3600 segundos, então nós vamos colocar horas em segundos e multiplicar por 24, fazendo com que o resultado seja 24 horas, fazendo com que fique fácil colocar ainda mais horas e dias.

export const getStaticProps: GetStaticProps = async () => {
  const res = await courseService.getNewestCourses();
  return {
    props: {
      course: res.data,
    },
    revalidate: 3600 * 24,
  };
};

Agora podemos ver que temos retorno visual. Não está agradável, mas nós temos ele, vamos então fazer ficar agradável.

OBS: Se você estiver vendo na tela “course.map is not a funcion” você deve comentar ou remover temporariamente a imagem dentro de “slideCard”. Depois de fazer uma das duas opções, você olha novamente na página. E aí quando você ver o retorno, pode descomentar ou colar novamente a imagem. Isso pode acontecer por causa do “process.env”, ser o primeiro contato dele com o front, então pode bugar