1. Nós iremos fazer o nosso projeto componentizado, ou seja, será bem dividido com components, então nós iremos criar vários arquivos com os conteúdos da pasta e colocar eles no mesmo lugar.

  2. Nós vamos então começar criando uma pasta na raiz do projeto chamada “src”. Iremos criar pastas com nomes: components, hooks e services.

  3. Com essa pasta criada, iremos criar mais 2 dentro dela: “components” e “services”

  4. Vamos então criar dentro da pasta “components” uma pasta chamada “homeNoAuth”, nós colocaremos dentro dela todos os components da página homeNoAuth.

  5. Vamos entrar na pasta “pages”, no arquivo “index.tsx”, vamos colocar algumas informações no nosso head

    import Head from "next/head";
import styles from "../styles/homeNoAuth.module.scss" 

const HomeNotAuth = function () {
  return (
    <>
      <Head>
        <title>Onebitflix</title>
        <link rel="shortcut icon" href="/favicon.svg" type="image/x-icon" />
      </Head>
      <main></main>
    </>
  );
};

export default HomeNotAuth;

  6. Podemos então dar um “npm run dev”, que é o comando que podemos dar para iniciarmos o servidor, que já vem configurado pelo next no arquivo “package.json”. Ele vai retornar um link local para acessarmos e vermos o que está acontecendo.

  7. Quando formos iniciar o backend, nós vamos parar esse servidor, pois o backend vai rodar sempre na porta 3000, e se você iniciar apenas o front, ele vai pegar a porta 3000. Então vamos parar o front, rodar o back e depois rodar o front de novo, para ficar na parta 3001.

  8. Vamos agora colocar duas informações simples para otimizar o SEO dessa nossa página, que são os meta dados. Como será essa página achada no google vamos colocar esses metas para otimizar a sua busca, vamos colocar o meta dado de título da página e de descrição, que será o que o google vai colocar quando aparecer na pesquisa.

    import Head from "next/head";
import styles from "../styles/homeNoAuth.module.scss" 

const HomeNotAuth = function () {
  return (
    <>
      <Head>
        <title>Onebitflix</title>
        <link rel="shortcut icon" href="/favicon.svg" type="image/x-icon" />
				<meta property="og:title" content="Onebitflix" key="title" />
				<meta name="description" content="Tenha acesso aos melhores conteúdos sobre programação de uma forma simples e fácil.">
      </Head>
      <main></main>
    </>
  );
};

export default HomeNotAuth;