🔗 https://curse-learn-next-js-vagnernerves.vercel.app/ 🔗
Este projeto faz parte do curso do Next.js.
-
Modulo 1 - Instação
Aprendido a instalar o projeto base.
Para instalar um novo projeto execute o comando: (documentação)
npx create-next-app@latest
-
Modulo 2 - CSS Styling
Aprendio que podemos utilizar o Tailwindcss como padrão do projeto, ou criar um arquivo [nome do componente].module.css e importar na pagina utilizada. Documentação Styling
-
Modulo 3 - Otimização fonts and Images
O Next possui o module "next/font/google" onde podemos importar as conts do google assim:
import { Inter, Lusitana } from 'next/font/google'; export const inter = Inter({ subsets: ['latin'] }); export const lusitana = Lusitana({ weight: ['400', '700'], subsets: ['latin'], });
Segue documentação das Fonts se usa Tailwind CSS olhe a parte dele de como usar.
Sobre Imagens o Next possui o modulo "next/image" onde ele optimza as imagens, segue exemplo abaixo:
import Image from 'next/image'; <Image src="/hero-desktop.png" width={1000} height={760} className="hidden md:block" alt="Screenshots of the dashboard project showing desktop version" /> <Image src="/hero-mobile.png" width={560} height={620} className="block md:hidden" alt="Screenshot of the dashboard project showing mobile version" />
Segue a documentação das Images.
-
Module 4 - Layouts and Pages
Na pasta app sao consideradas as rotas, mas cada pasta para ser considerado rota precisa ter um arquivo "page.tsx" se tiver outro nome de arquivo ele considera como componente e nao como rota.
Tambem temos os arquivos "layouts.tsx" que servem para criar um layout padrao apartir da rota.
-
Module 5 - Navigate
Para navegação de rotas o Next possui o modulo "next/link", segue exemplo:
import Link from 'next/link'; <Link key={link.name} href={link.href} className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3" > <LinkIcon className="w-6" /> <p className="hidden md:block">{link.name}</p> </Link>
Para conseguir pegar a rota em que voce esta, podemos user o "usePathname" do module "next/navigatio", com ele retorna a rota que estamos. Segue exemplo abaixo:
'use client'; import { usePathname } from 'next/navigation'; const pathname = usePathname(); console.log(pathname)
-
Modulo 6 - Configuração do banco de dados e projeto
-
Modulo 7 - Fetching Data
Foi feito buscaa api para mostrar na pagina "app/dashboar/page.tsx" e falado sobre cascatas de solicitações e busca paralela de dados, Segue exemplo abaixo de busca paralela:
export async function fetchCardData() { try { const invoiceCountPromise = sql`SELECT COUNT(*) FROM invoices`; const customerCountPromise = sql`SELECT COUNT(*) FROM customers`; const invoiceStatusPromise = sql`SELECT SUM(CASE WHEN status = 'paid' THEN amount ELSE 0 END) AS "paid", SUM(CASE WHEN status = 'pending' THEN amount ELSE 0 END) AS "pending" FROM invoices`; const data = await Promise.all([ invoiceCountPromise, customerCountPromise, invoiceStatusPromise, ]); // ... } }
-
Modulo 8 - Renderização Estatica e Dinamica
Para cancelar a renderização estatica pode-se usar o "next/cache" buscando o "unable_noStore" e usando nas funções. Segue exemplo:
import { unstable_noStore as noStore } from 'next/cache'; export async function fetchRevenue() { // Add noStore() here to prevent the response from being cached. // This is equivalent to in fetch(..., {cache: 'no-store'}). noStore(); // ... }
-
Modulo 9 - Transmissão
O arquivo "logadin.tsx" é uma rquivo especial Nextjs, que colcoa o Loading até a pagina ser carregada.
Para nao carregar o Loading para todas as rotas, podemos usar o Grupo de Rotas onde criar uma pasta "(NomeDaPasta)" e dentro dela signica que so vai ser executado no principal e nao nas outras rotas dentro.
No react existe o "Suspense", ele ajuda a so exibir o componente depois que ele tiver carregado podendo assim mostrar um esqueleto ou um loading antes. segue o exemplo:
import { Suspense } from 'react'; import { RevenueChartSkeleton } from '@/app/ui/skeletons'; <Suspense fallback={<RevenueChartSkeleton />}> <RevenueChart /> </Suspense>
-
Modulo 10 - Renderização parcial
Foi falado sobre renderizaçãoes parciais e mostrado um pouco mais sobre o Suspense do react.
-
Modulo 11 - Pesquisa e paginação
Utilizamos o "useSearchParams", "usePathname" e "useRouter" do "next/navigation" para busca via url no servidor, segue exemplo abaixo:
const searchParams = useSearchParams(); const pathname = usePathname(); const { replace } = useRouter(); function handleSearch(term: string) { const params = new URLSearchParams(searchParams); if (term) { params.set('query', term); } else { params.delete('query'); } replace(`${pathname}?${params.toString()}`); }
Foi utilizando tambem a bilioteca use-debounce para só fazer a consulta se o usuairio parou realmente de digitar.
-
Modulo 12 - Dados Mutantes
Neste modulos aprendemos usar ações de servidor para inserir, editar e excluir. Olhe o arquivo "app/lib/actions.ts"
-
Modulo 13 - Tratamento de erros
Para tratar um erro crie uma rquivo "erro.tsx" ele tem que ser "use client" e ter este padrão:
'use client'; import { useEffect } from 'react'; export default function Error({ error, reset, }: { error: Error & { digest?: string }; reset: () => void; }) { useEffect(() => { // Optionally log the error to an error reporting service console.error(error); }, [error]); return ( <main className="flex h-full flex-col items-center justify-center"> <h2 className="text-center">Something went wrong!</h2> <button className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400" onClick={ // Attempt to recover by trying to re-render the invoices route () => reset() } > Try again </button> </main> ); }
Você tamnem pode criar aruivo para nao encontrado, criando um arquivo "not-found.tsx", veja como foi implementano na pasta "app/dashboard/invoicex/[id]/edit/".
-
Modulo 14 - Melhorando a acessibilidade
Foi falado sobre acessibilidade e verificado erros no servidor, para isso olhe o commit
-
Modulo 15 - Adicionando autenticação
Aprendemos sobre autenticação e autorização. Fizemso autenticação com o "NextAut", para ver as autterações olhe o commit
-
Modulo 16 - Adicionando Meta Data
Para Adicionar Meta Data acesse o Layout ou page e coloque o comando:
import { Metadata } from 'next'; export const metadata: Metadata = { title: 'Acme Dashboard', description: 'The official Next.js Course Dashboard, built with App Router.', metadataBase: new URL('https://next-learn-dashboard.vercel.sh'), };
Tambem temos o template que podemos usar na rota principal e nas rotas filhas so alterar o titulo segue exemplo abaixo:
# Rota Pai import { Metadata } from 'next'; export const metadata: Metadata = { title: { template: '%s | Acme Dashboard', default: 'Acme Dashboard', }, description: 'The official Next.js Learn Dashboard built with App Router.', metadataBase: new URL('https://next-learn-dashboard.vercel.sh'), };
# Rota Filho import { Metadata } from 'next'; export const metadata: Metadata = { title: 'Invoices', };
Made with love and hate 😅, get in touch!