Introdução

Nessas aulas nós iremos fazer a configuração inicial do projeto. Faremos a criação e organização de pastas e arquivos.

Criação do projeto

Nós iremos deixar o front e o back em uma única pasta, para nós termos uma facilidade de organização. Nós iremos chamar de “onebitflix-main”
1. Agora com essa pasta criada, nós iremos colocar o backend aqui e também iremos abrir o terminal na pasta “onbebitflix-main”
Se for a primeira vez com o next, o próprio npx irá informar o que é necessário instalar para prosseguir com o comando.
1. O comando é semelhante ao comando dado para criar o app do react. Nós iremos colocar o adicional do typescript, para o projeto já ter ele como base.
```
npx create-next-app onebitflix-front --ts
```
Agora vamos abrir a pasta “onebitflix-front” com o nosso vscode

Instalação das bibliotecas com as suas versões fixas:

npm install [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

Configuração de arquivos

Vamos primeiro para a página “pages”
1. Dentro da pasta pages existe uma pasta chamada “api”, como nós já temos um back-end próprio, nós não iremos usar ela, então podemos excluir a pasta “api”.
Ainda dentro de “pages” nós iremos entrar no arquivo “index.tsx”
1. Nós temos uma estrutura que é padrão de página do typescript, com tipagem. Mas ela não é obrigatória para páginas do next, então não usaremos nas nossas páginas, iremos usar apenas no arquivo “_app.tsx” que já está configurado com a tipagem.
2. Nós iremos então excluir tudo que temos dentro desse nosso index, pois nós iremos recriar colocando as nossas páginas iniciais.
3. Para o typescript não ficar reclamando do arquivo vazio, vamos então criar a nossa função, que será o padrão que criaremos todas as pastas. Vamos chamar ela de “homeNoAuth”, pois essa será a página que a pessoa vai ver antes de estar autenticada.
```
import Head from "next/head";

const HomeNotAuth = function () {
  return (
		<>
			<Head></Head>
			<main></main>
		</>
};

export default HomeNotAuth;
```
Agora novamente na raiz do projeto, nós iremos na pasta “styles”
1. Vamos entrar no arquivo “globals.css” e iremos apagar tudo que está dentro, para criar do 0 o que iremos usar.
2. Você vai mudar o nome de “home.module.css” para “homeNoAuth.module.css”, pode deixar os nomes com letra em minúsculo mesmo.
Para o visual, nós iremos usar o sass. Vai ser mais simples usar ele do que normalmente, pois nós não vamos precisar transpilar de sass para css, será automático.
1. Mesmo que você já tenha o sass instalado de forma global, o next pede que você instale no projeto.
```
npm install sass -D
```
Agora nós iremos mudar o nome do arquivo de estilo global.
1. globals.css ⇒ globals.scss
2. homeNoAuth.module.css ⇒ homeNoAuth.module.scss

Com isso feito, precisamos mudar a importação do visual na nossa pasta principal“_app.tsx”

Dentro dela vamos mudar o import de “globals.css’ para “globals.scss”

import '../styles/globals.scss' 
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

Nós vamos também importar o estilo de home no arquivo “index.tsx”

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

const HomeNotAuth = function () {
  return (
		<>
			<Head></Head>
			<main></main>
		</>
};

export default HomeNotAuth;

Agora o estilo básico nós iremos criar dentro de “globals.scss”
1. Primeiro faremos uma alteração em todos os elementos usando “*”
```
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
```
2. Nós iremos usar a tag “main” para englobar todos os nossos elementos, então vamos deixar ele com um background, altura e também cor de texto padrão.
```
main {
  background-color: #151515;
  min-height: 100vh;
  color: white;
}
```
3. Nós iremos também fazer a remoção da margem dos parágrafos, pois usaremos o bootstrap, e no mesmo retirando a margem com “*”, o bootstrap ainda seta uma margem para os parágrafos. Então faremos a remoção da margin de todos os parágrafos dentro de main
```
main {
  background-color: #151515;
  min-height: 100vh;
  color: white;
  p {
    margin: 0;
  }
}
```

Vamos por fim fazer a alteração da nossa scrollbar, para que ela fique de acordo com a nossa página.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main {
  background-color: #151515;
  min-height: 100vh;
  color: white;

  p {
    margin: 0;
  }
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #151515;
}
::-webkit-scrollbar-thumb {
  background: #868686;
  border-radius: 40px;
}

Configurando as imagens

Iremos então abrir a pasta “public”, é nessa pasta que nós temos todas as imagens. Iremos então apagar tudo que está dentro dela, pois não iremos usar.