[DRAFT] DOCS: Next App Router #27
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Parte de roteamento e APIs feita, necessitam de revisão. |
EdPPF
reviewed
Mar 6, 2024
|
|
||
| ## Introdução | ||
|
|
||
| O `App Router` foi introduzido na versão 13 do next.js e foi construído utilizando o `React Server Components`. |
There was a problem hiding this comment.
Acho uma boa colocar aqui a sigla que você usou pra se referir aos RSCs depois.
Suggested change
| O `App Router` foi introduzido na versão 13 do next.js e foi construído utilizando o `React Server Components`. | |
| O `App Router` foi introduzido na versão 13 do next.js e foi construído utilizando o `React Server Components (RSC)`. |
EdPPF
reviewed
Mar 6, 2024
|
|
||
| O `App Router` foi introduzido na versão 13 do next.js e foi construído utilizando o `React Server Components`. | ||
|
|
||
| O `App Router` trabalha com o diretório app para a criação de rotas que podem ou não serem de acesso público, por padrão componentes deste diretório são `RSCs`. As páginas são criadas nas rotas e irão herdar certas características definidas por arquivos especiais como `navbar` e `footer` definidos no arquivo `layout.tsx` da rota. |
There was a problem hiding this comment.
Só umas correções de português e de estrutura da frase
Suggested change
| O `App Router` trabalha com o diretório app para a criação de rotas que podem ou não serem de acesso público, por padrão componentes deste diretório são `RSCs`. As páginas são criadas nas rotas e irão herdar certas características definidas por arquivos especiais como `navbar` e `footer` definidos no arquivo `layout.tsx` da rota. | |
| O `App Router` trabalha com o diretório app para a criação de rotas que podem ou não ser de acesso público. Por padrão, componentes deste diretório são `RSCs`. As páginas são criadas nas rotas e irão herdar certas características definidas por arquivos especiais, como `navbar` e `footer`, definidos no arquivo `layout.tsx` da rota. |
EdPPF
reviewed
Mar 6, 2024
| O `App Router` trabalha com o diretório app para a criação de rotas que podem ou não serem de acesso público, por padrão componentes deste diretório são `RSCs`. As páginas são criadas nas rotas e irão herdar certas características definidas por arquivos especiais como `navbar` e `footer` definidos no arquivo `layout.tsx` da rota. | ||
|
|
||
| !!! | ||
| Para mais informações sobre [React Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components). |
There was a problem hiding this comment.
Sugestão de estrutura, de novo
Suggested change
| Para mais informações sobre [React Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components). | |
| Para mais informações, acesse [React Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components). |
EdPPF
reviewed
Mar 6, 2024
| !!! | ||
|
|
||
| !!! | ||
| O App Router não trabalha exclusivamente com `server components`, se for necessário o uso de `client components` adicione a linha `"use client"` no topo do arquivo da página. |
There was a problem hiding this comment.
Suggested change
| O App Router não trabalha exclusivamente com `server components`, se for necessário o uso de `client components` adicione a linha `"use client"` no topo do arquivo da página. | |
| O App Router não trabalha exclusivamente com `server components`. Se for necessário o uso de `client components`, adicione a linha `"use client"` no topo do arquivo da página. |
EdPPF
reviewed
Mar 6, 2024
| - [Loading](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#instant-loading-states): Define a UI da rota, enquanto a página principal não estiver completa. Dependendo do design pode ser utilizada uma página esqueleto, uma barra de loading ou o que vier de sua imaginação, desde que a página de loading não fique muito pesada, desse modo, causando problemas de performance. | ||
|
|
||
| !!! | ||
| Esses arquivos deverão ser da extensão `.js`, `.jsx` ou .tsx. Dê preferência ao uso da extensão `.tsx `(TypeScript). |
There was a problem hiding this comment.
Suggested change
| Esses arquivos deverão ser da extensão `.js`, `.jsx` ou .tsx. Dê preferência ao uso da extensão `.tsx `(TypeScript). | |
| Esses arquivos deverão ser da extensão `.js`, `.jsx` ou `.tsx`. Dê preferência ao uso da extensão `.tsx` (TypeScript). |
EdPPF
reviewed
Mar 6, 2024
|
|
||
| ### Criando páginas e layouts | ||
|
|
||
| As páginas são arquivos com o nome `page.tsx` que apresentam a estrutura do React e vão desempenhar o papel de criar UIs especificas a determinada rota. Elas tornam a rota acessível para visitantes e por padrão são ´Server Components´. |
There was a problem hiding this comment.
Suggested change
| As páginas são arquivos com o nome `page.tsx` que apresentam a estrutura do React e vão desempenhar o papel de criar UIs especificas a determinada rota. Elas tornam a rota acessível para visitantes e por padrão são ´Server Components´. | |
| As páginas são arquivos com o nome `page.tsx` que apresentam a estrutura do React e vão desempenhar o papel de criar UIs especificas a determinada rota. Elas tornam a rota acessível para visitantes e por padrão são `Server Components`. |
EdPPF
reviewed
Mar 6, 2024
| === | ||
|
|
||
| !!! | ||
| Uma rota é publicamente acessível, somente se existir um arquivo do tipo `page.tsx` ou `route.ts`. |
There was a problem hiding this comment.
Suggested change
| Uma rota é publicamente acessível, somente se existir um arquivo do tipo `page.tsx` ou `route.ts`. | |
| Uma rota é publicamente acessível somente se existir um arquivo do tipo `page.tsx` ou `route.ts`. |
EdPPF
reviewed
Mar 6, 2024
| !!! | ||
|
|
||
| !!! | ||
| Para padrões avançados de roteamento, como Rotas em paralelo ou interceptação de rotas, [veja](https://nextjs.org/docs/app/building-your-application/routing#advanced-routing-patterns) |
There was a problem hiding this comment.
Outra sugestão de estrutura da frase. Pode mudar o que adicionei pro que achar melhor
Suggested change
| Para padrões avançados de roteamento, como Rotas em paralelo ou interceptação de rotas, [veja](https://nextjs.org/docs/app/building-your-application/routing#advanced-routing-patterns) | |
| Para padrões avançados de roteamento, como Rotas em paralelo ou interceptação de rotas, veja *[Advanced Routing Patterns](https://nextjs.org/docs/app/building-your-application/routing#advanced-routing-patterns)* |
EdPPF
reviewed
Mar 6, 2024
| === | ||
|
|
||
| !!! | ||
| Para mais informações sobre [redirecionamento](https://nextjs.org/docs/app/building-your-application/routing/redirecting). |
There was a problem hiding this comment.
Suggested change
| Para mais informações sobre [redirecionamento](https://nextjs.org/docs/app/building-your-application/routing/redirecting). | |
| Para mais informações, acesse [redirecionamento](https://nextjs.org/docs/app/building-your-application/routing/redirecting). |
EdPPF
reviewed
Mar 6, 2024
|
|
||
| ### Criando uma rota de API | ||
|
|
||
| Para criar uma rota API é necessário escrever um arquivo com o nome `route.ts`, nele será construída a API da rota. |
There was a problem hiding this comment.
Suggested change
| Para criar uma rota API é necessário escrever um arquivo com o nome `route.ts`, nele será construída a API da rota. | |
| Para criar uma rota API é necessário escrever um arquivo com o nome `route.ts`, onde será construída a API da rota. |
EdPPF
reviewed
Mar 6, 2024
|
|
||
| O corpo da função tem como objetivo a aquisição dos dados a serem transmitidos pela API ou a realização de mudanças no banco de dados, provavelmente vai entrar alguma lógica envolvendo o banco de dados nessa parte. | ||
|
|
||
| Por fim, as APIs `route handler` do next precisam do `return` de uma `Response`, nessa `Response` utilize o método `json` para a transmissão dos dados coletados ou código de status. |
There was a problem hiding this comment.
Suggested change
| Por fim, as APIs `route handler` do next precisam do `return` de uma `Response`, nessa `Response` utilize o método `json` para a transmissão dos dados coletados ou código de status. | |
| Por fim, as APIs `route handler` do next precisam do `return` de uma `Response`. Nessa `Response` utilize o método `json` para a transmissão dos dados coletados ou código de status. |
EdPPF
reviewed
Mar 6, 2024
| === | ||
|
|
||
| !!! | ||
| Em uma rota não pode conter uma `page` e um `route handler` ao mesmo tempo, pois haverá conflito e o `route handler` prevalecerá. Por isso, recomendo criar um diretório `api` na rota para colocar o `route handler`. |
There was a problem hiding this comment.
Suggested change
| Em uma rota não pode conter uma `page` e um `route handler` ao mesmo tempo, pois haverá conflito e o `route handler` prevalecerá. Por isso, recomendo criar um diretório `api` na rota para colocar o `route handler`. | |
| Em uma rota não pode conter uma `page` e um `route handler` ao mesmo tempo, pois haverá conflito e o `route handler` prevalecerá. Por isso, é recomendado criar um diretório `api` na rota para colocar o `route handler`. |
EdPPF
reviewed
Mar 6, 2024
|
|
||
| ## Interações com banco de dados | ||
|
|
||
| Podemos utilizar diferentes métodos para a busca de dados para formar a página do site, sendo eles `server-side` ou `client-side`, normalmente esses dados serão recebidos em formato `JSON`. Os dados podem vir de APIs existentes na internet ou de APIs internas alimentadas com o próprio banco de dados para `client components` e os dados podem vir de APIs externas ou diretamente do banco de dados para os `server components`. |
There was a problem hiding this comment.
Suggested change
| Podemos utilizar diferentes métodos para a busca de dados para formar a página do site, sendo eles `server-side` ou `client-side`, normalmente esses dados serão recebidos em formato `JSON`. Os dados podem vir de APIs existentes na internet ou de APIs internas alimentadas com o próprio banco de dados para `client components` e os dados podem vir de APIs externas ou diretamente do banco de dados para os `server components`. | |
| Podemos utilizar diferentes métodos para a busca de dados para formar a página do site, sendo eles `server-side` ou `client-side`. Normalmente, esses dados serão recebidos em formato `JSON`. Os dados podem vir de APIs existentes na internet ou de APIs internas alimentadas com o próprio banco de dados para `client components`, ou então podem vir de APIs externas ou diretamente do banco de dados para os `server components`. |
EdPPF
reviewed
Mar 6, 2024
|
|
||
| ### Server Side | ||
|
|
||
| Quando precisamos buscar dados para criar a página no lado do servidor pode-se utilizar `fetch` ou `axios` para buscar por dados externos e uma função com busca direta no banco de dados para dados internos. |
There was a problem hiding this comment.
Suggested change
| Quando precisamos buscar dados para criar a página no lado do servidor pode-se utilizar `fetch` ou `axios` para buscar por dados externos e uma função com busca direta no banco de dados para dados internos. | |
| Quando precisamos buscar dados para criar a página no lado do servidor, pode-se utilizar `fetch` ou `axios` para buscar por dados externos e uma função com busca direta no banco de dados para dados internos. |
EdPPF
reviewed
Mar 6, 2024
|
|
||
| ### Client Side | ||
|
|
||
| Quando precisar de dados no lado do cliente, poderá ser utilizados `fetch` e `axios` para buscar dados no servidor via `route handlers`. |
There was a problem hiding this comment.
Suggested change
| Quando precisar de dados no lado do cliente, poderá ser utilizados `fetch` e `axios` para buscar dados no servidor via `route handlers`. | |
| Quando precisar de dados no lado do cliente, poderão ser utilizados `fetch` e `axios` para buscar dados no servidor via `route handlers`. |
EdPPF
reviewed
Mar 6, 2024
| ``` | ||
|
|
||
| === | ||
| Os dados coletados podem ser utilizados do jeito que for necessário, exemplo de uso abaixo: |
There was a problem hiding this comment.
Suggested change
| Os dados coletados podem ser utilizados do jeito que for necessário, exemplo de uso abaixo: | |
| Os dados coletados podem ser utilizados do jeito que for necessário, como no exemplo abaixo: |
ou algo assim.
EdPPF
requested changes
Mar 6, 2024
There was a problem hiding this comment.
@PedroAmorimG , fiz a review da sua PR até agora. São só umas sugestões de estrutura do que você escreveu e algumas correções de português, mas no conteúdo em si não consegui achar nenhum erro.
E, aliás, se você tiver recebido uns 10 emails sobre meus comentários, foi mal... Ainda tô aprendendo a usar essa feature do GitHub.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Parte de roteamento possivelmente pronta.