Curse Learn Next.js

🔗 https://curse-learn-next-js-vagnernerves.vercel.app/ 🔗

Este projeto faz parte do curso do Next.js.

🧭 Table of contents

🧭 Table of contents
👏 Learning and more Implementations
💡 Technologies Used
✒ Author

👏 Learning and more Implementations

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.

Segue a documentação dos routes

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>

Segue documentação do Linking

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',
};

💡 Technologies Used

✒ Author

Vagner Nerves

Made with love and hate 😅, get in touch!

VagnerNerves / curse-learn-next.js