Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/carolinasfreitas/aula1-nextjs
Primeira aula de Linguagens de Programação Emergentes - 4º semestre
https://github.com/carolinasfreitas/aula1-nextjs
nextjs
Last synced: about 16 hours ago
JSON representation
Primeira aula de Linguagens de Programação Emergentes - 4º semestre
- Host: GitHub
- URL: https://github.com/carolinasfreitas/aula1-nextjs
- Owner: CarolinaSFreitas
- Created: 2024-03-07T23:14:24.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-03-08T01:04:14.000Z (8 months ago)
- Last Synced: 2024-03-08T03:22:46.661Z (8 months ago)
- Topics: nextjs
- Language: TypeScript
- Homepage:
- Size: 34.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Aula01 - NextJS
Primeira aula de Linguagens de Programação Emergentes - NextJS
## 🛠️ Criando um projeto
1. `` npm install -g [email protected] ``
2. `` npx create-next-app@latest ``
3. `` cd ``
4. `` npm run dev ``
5. http://localhost:3000/
# 📁 Os arquivos:
1. "page.tsx" renderiza a página e esse arquivo quando dentro de pastas cria uma rota, como por exemplo http://localhost:3000/Produtos
*obs: esses outros arquivos page.tsx precisa ser criado dentro do diretório do "src\app"*
3. "page.tsx" dentro da pasta padrão que é criada no `` npx create `` reune os componentes criados
4. "layout.tsx" armazena o layout da página, é sempre o mesmo e *abaixo* (da tag que envolve o {children} ficam os arquivos "page.tsx"
## 🌎 Hello World
- Em layout.tsx:
````
import type { Metadata } from "next";
import "./globals.css";
export const metadata: Metadata = {
title: "Primeira Aula",
description: "Primeira aula de Ling. Emergentes - 4º semestre",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
````
- Em page.tsx:
````
import Image from "next/image";
export default function Home() {
return (
Hello World
);
}
````
- Saída:
## 🎨 Tailwind CSS:
- Em "global.css"
- `` CTRL + Shift + P ``, "Change Language Model" e seleciona o Tailwind
#
### 📝 Notas:
- Nunca um componente pode ter mais de uma tag, pra fazer isso precisa encapsular (com uma div por exemplo). Exemplo criando componente de "Título":
- Uso do componente no layout.tsx, dentro do `` ``, acima do `` {children} ``:
- Bootstrap de Tailwind: **Flowbite**. Substituindo o que tem no componente do `` ``, cola os componentes do Flowbite e adiciona o componente no "layout.tsx"
Esse componente de Título vai ser "fixado" em todas as rotas
- Pra "linkar" as rotas como âncoras, trocar a tag de para e trocando o href="/rota" para ir para as rotas criadas, exemplo:
- Para adicionar detalhes num item, exemplo na rota "/produtos" para ela ter detalhes de um produto, cria-se uma pasta com uma sub-pasta com esse formato: **"[id]"**, que é uma variável. Então, na rota tendo esse parâmetro variável vai trazer os detalhes do produto com o id definido, ou qualquer outro tipo de variável.
- O nome das pastas não podem iniciar com letra maiúscula
- Flowbite: https://flowbite.com/docs/getting-started/quickstart/