<h1 id="como-criar-templates-de-páginas-no-nextjs"><a href="#como-criar-templates-de-p%C3%A1ginas-no-nextjs" class="anchor">Como criar templates de páginas no Next.js</a></h1>
Salve devs ✌🏾
Como prometido no texto passado, irei falar sobre como criar templates/Layout para suas páginas no <a href="https://nextjs.org/">Next.js</a>.
Em um sistema web é muito comum termos páginas com estruturas diferentes, um exemplo prático são as páginas de um dashboard ou admin e login.
Muito comum uma página de dashboard/admin ter um menu ao lado, um header com informações do usuário logado e N coisas diferentes da página de login, onde é mais comum apenas um formulário centralizado.
O problema é que num essa estrutura de dashboard/admin se repete em várias páginas: página de listas, página de edição do usuário e etc.
Para a estrutura do login a mesma coisa: login, cadastro, esqueci a senha e etc.
<h3 id="o-que-fazer-então"><a href="#o-que-fazer-ent%C3%A3o" class="anchor">O que fazer então?</a></h3>
Basta você "copiar e colocar" as mesmas coisas (header, menu, footer) em todas as páginas.
Ok, isso funciona. Mas a nossa ideia é termos um código limpo sem repetições. Então não basta apenas fazê-lo funcionar; temos que gerar códigos de fácil compreensão para um próximo dev dar manutenção.
<h3 id="como-eu-faço-no-react"><a href="#como-eu-fa%C3%A7o-no-react" class="anchor">Como eu faço no React?</a></h3>
No <a href="https://reactjs.org/">React.js</a> não tinha muito segredo, bastava arrumar isso nos arquivos de rota.
<pre><code class="language-bash">./index.ts
</code></pre>
<pre><code class="language-js">import React from 'react';
import { Switch } from 'react-router-dom';

import DashboardLayout from '../_layout/Dashboard';
import AuthLayout from '../_layout/Auth';
import Dashboard from '../pages/Dashboard';
import SignIn from '../pages/SignIn';
import SignUp from '../pages/SignUp';
import Route from './Route';

const Routes: React.FC = () => (
 &#x3C;Switch>
 &#x3C;Route path="/sign-in" component={SignIn} />
 &#x3C;Route path="/sign-up" component={SignUp} layout={AuthLayout} />
 &#x3C;Route path="/dashboard" component={Dashboard} layout={DashboardLayout} />
 &#x3C;/Switch>
);

export default Routes;
</code></pre>
<pre><code class="language-bash">./Route.ts
</code></pre>
<pre><code class="language-js">import React from 'react';
import {
 RouteProps as ReactRouteProps,
 Route as ReactRoute,
} from 'react-router-dom';


interface RouteProps extends ReactRouteProps {
 component: React.ComponentType;
 layout?: React.ComponentType;
}

const Route: React.FC&#x3C;RouteProps> = ({
 component: Component,
 layout: Layout
}) => {

 return (
 &#x3C;ReactRoute
 {...rest}
 render={() => (
 &#x3C;>
 {Layout ? (
 &#x3C;Layout>
 &#x3C;Component />
 &#x3C;/Layout>
 ) : (
 &#x3C;Component />
 )}
 &#x3C;/>
 )}
 />
 );
};

export default Route;
</code></pre>
Fácil não? Agora se você já trabalhou com o Next, sabe muito bem que no next não temos controle nas rotas. Basta criar um aquivo na pasta <code>pages</code> e teremos a rota com o mesmo nome do arquivo.
<h3 id="então-como-fazer-no-nextjs"><a href="#ent%C3%A3o-como-fazer-no-nextjs" class="anchor">Então como fazer no Next.js?</a></h3>
Vou passar aqui o passo a passo de um método que tenho feito. Lembrando que aqui não tem certo nem errado, apenas um modo diferente. Então se você faz de uma outra forma, por favor, nos fale para aprendermos uma nova forma. 😉
Primeira coisa para organizar é criar a pasta <code>Templates</code> para deixarmos tudo relacionado a isso nela.
Dentro dela vamos criar 2 templates: Um para auth (sign in, sign up etc) e um para admin (dashboard).
Gosto de criar esses arquivos desta forma <code>./TemplateAdmin/index.tsx</code> pois podemos e iremos ter arquivos de styles. Assim fica mais organizado.
<code> ./TemplateAdmin/index.tsx</code>
<pre><code class="language-js">import { ReactNode } from 'react'

type TemplateAdminProps = {
 children: ReactNode
}
export default function TemplateAdmin({ ...props }: TemplateAdminProps) {
 return (
 &#x3C;>
 &#x3C;header>Header da admin&#x3C;/header>
 &#x3C;aside>Menu&#x3C;/aside>
 &#x3C;main>
 &#x3C;h1>Template Admin&#x3C;/h1>
 {props.children}
 &#x3C;/main>
 &#x3C;footer>Footer da admin&#x3C;/footer>
 &#x3C;/>
 )
}
</code></pre>
<code> ./TemplateAuth/index.tsx</code>
<pre><code class="language-js">import { ReactNode } from 'react'

type TemplateAuthProps = {
 children: ReactNode
}
export default function TemplateAuth({ ...props }: TemplateAuthProps) {
 return (
 &#x3C;>
 &#x3C;main>
 &#x3C;h1>Template Auth&#x3C;/h1>
 {props.children}
 &#x3C;/main>
 &#x3C;footer>Footer&#x3C;/footer>
 &#x3C;/>
 )
}
</code></pre>
Agora poderemos criar por exemplo o componente <code>Header</code> e apenas importa-lo no template admin. Da mesma forma o <code>Footer</code>, <code>Navbar</code> e etc.
Ainda dentro da pasta <code>.Templates</code> vamos criar o arquivo <code>TemplateWrapper.tsx</code> que será nosso aquivo principal.
<code> ./TemplateWrapper.tsx</code>
<pre><code class="language-js">import { AppProps } from 'next/dist/next-server/lib/router/router'
import TemplateAdmin from './TemplateAdmin'
import TemplateAuth from './TemplateAuth'

type TemplateWrapperProps = AppProps &#x26; {
 layout?: 'auth' | 'admin'
}

export default function TemplateWrapper({
 layout,
 ...props
}: TemplateWrapperProps) {
 switch (layout) {
 case 'admin':
 return &#x3C;TemplateAdmin>{props.children}&#x3C;/TemplateAdmin>
 break
 case 'auth':
 return &#x3C;TemplateAuth>{props.children}&#x3C;/TemplateAuth>
 break
 default:
 return &#x3C;>{props.children}&#x3C;/>
 break
 }
}
</code></pre>
Bom, neste arquivo receberemos por <code>props</code> qual o template deverá ser renderizado na tela.
Colocando em <code>switch</code> pois poderemos ter 2, 3, x templates diferentes.
No nosso arquivo <code>pages/_app.tsx</code>, nosso arquivo principal das páginas do next.js, vamos renderizar nosso <code>TemplateWrapper.tsx</code>
<pre><code class="language-js">...
import TemplateWrapper from 'Template/TemplateWrapper'

function App({ Component, pageProps }: AppProps) {
 ...
 &#x3C;TemplateWrapper {...pageProps}>
 &#x3C;Component {...pageProps} />
 &#x3C;/TemplateWrapper>
 ...
}

export default App
</code></pre>
Pronto, nossa lógica de templates esta criada. Basta em nosso arquivo de página, mandarmos nossa <code>prop layout</code>
Mas, vou colocar na prática, bora lá!
<code>pages/sign-in.tsx</code>
<pre><code class="language-js">...
export default function SignIn() {
 ...
}

export const getInitialProps = () => {
 return {
 layout: 'auth'
 }
}
</code></pre>
Agora vamos criar nossa página de dashboard também, porém para mudarmos, ao invés de ser uma página com <code>getInitialProps</code>, vamos criar uma com SSR.
<code>pages/dashboard.tsx</code>
<pre><code class="language-js">...
export default function Dashboard() {
 ...
}

export const getServerSideProps = () => {
 return {
 props: {
 layout: 'admin'
 }
 }
}

</code></pre>
Reparem que no <code>getServerSideProps</code> no <code>return</code> precisamos colocar nosso prop <code>layout</code> dentro do objeto <code>props</code>.
É isso galera, basta aplicar nas suas próximas páginas e ser feliz 😁. Caso queira ver, subi este tutorial no meu <a href="https://github.com/douglasporto/next-with-template">GitHub</a> aproveita e me segue lá 😅.
Você faz de outra forma? Achou algum problema nessa solução? Da aquele help e compartilha conosco. 🤗

# Design System para React

Salve devs ✌🏾

Toda vez que iremos iniciar um novo projeto, surge as dúvidas referentes a qual pasta deve ficar cada arquivo, principalmente se você é júnior. Por conta disso hoje vou falar sobre Design System.

Já deixo claro aqui que este post não coloca aqui a melhor ou a pior forma de arquitetura de seu projeto. Apenas vou te mostrar a forma que estruturo.

Uma outra observação é que irei usar como exemplo em um projeto com [React.js](https://reactjs.org/), porém os conceitos podem ser utilizado em qualquer outro framework, até mesmo num projeto com Javascript puro (famoso vanilla js).

O design system que mais utilizo e gosto é o Atomic Design, desenvolvido por [Brad Frost](https://bradfrost.com/).

Não vou explicar muito sobre Atomic Design por meu objetivo é mostrar mesmo na prática.

Mas uma breve, muito breve mesmo, informação sobre é que essa arquitetura foi criada observando componentes químicos.

Onde encontramos 5 estágios: átomos, moléculas, organismos, modelos e paginas.

![Atomic Design](/assets/img/posts/atomic-design.png "Atomic Design")

Num exemplo prático, átomos poderia ser um botão. A molécula seria esse botão (átomo) com outro átomo, talvez um icone. E assim por diante até chegarmos na maior composição que é a página.

Caso queira mais detalhes, este artigo é perfeito para você <https://vidadeproduto.com.br/atomic-design/>

### Vamos para prática

Chegou a hora de aplicarmos tudo isso no nosso projeto.

Eu não gosto de usar as nomenclaturas oferecidas pelo atomic. Prefiro usar apenas a ideia de separação de componentes.

Primeira coisa que eu faço é deixar tudo dentro da pasta `src/`

Dentro de dela, as pastas importantes para nosso design system são:

```bash
 src/
 - Page
 - Template
 - DesignSystem
 - Components
```

### Page

Ficará apenas nossas páginas nada de styles ou coisas do tipo

```bash
 Page/
 - Index.tsx
 - About.tsx
 - Contact.tsx
```

### Template

Colocaremos os possíveis templates que teremos.

Como assim?

Num sistema, costumamos ter diferentes formas de apresentar a informação para o cliente. Como por exemplo, a estrutura de paginas do signIn e SignUp são diferentes da estrutura de páginas de uma Dashboard.

É justamente aqui que montaremos essas estruturas onde cada página irá dizer qual estrutura ela deverá ser montada.

Aqui poderemos ter styles, por isso gosto de separar por pastas os templates

```bash
 Template/
 - Auth/
 - Index.tsx
 - styles.scss
 - Dashboard/
 - Index.tsx
 - styles.scss
```

Nos próximos posts, estou querendo trazer de forma prática como fazer isso no [Next.js](https://nextjs.org/). Caso achar interessante, comenta aqui embaixo.

### DesignSystem

É aqui que a brincadeira fica cada vez mais interessante.

Dentro desta página, ficará nossos átomos e Moléculas.

Uma boa dica para ter ideias de como separar é olhar como é feito essa separação em design system como [Material-ui](http://material-ui.com/), [Chakra-ui](https://chakra-ui.com/) e etc.

```bash
 DesignSystem/
 - Form/
 - Button/
 - Index.tsx
 - styles.scss
 - Input/
 - Index.tsx
 - styles.scss
 - System/
 - Card/
 - Index.tsx
 - styles.scss
 - Tabs/
 - Index.tsx
 - styles.scss
```

Uma outra dica, da qual aprendi com a galera do [Quinto Andar](https://www.quintoandar.com.br/) neste [video do YouTube](https://www.youtube.com/watch?v=5fM4XuMxwkA), é que mesmo usando o componentes do material-ui (ou qualquer outro) é sempre implanta-los no seu design system, nunca no projeto direto.

Exemplo:

```js
 import {
 Button as MuiButton,
 ButtonProps as MuiButtonProps
 } from '@material-ui/core'

 import * as S from './styles'

 export type ButtonProps = {
 title: string
 className?: string
 } & Pick<MuiButtonProps, 'variant' | 'color'>

 export default function Button({
 title,
 className,
 variant = 'contained',
 color = 'primary'
 }: ButtonProps) {
 return (
 <S.Wrapper className={className}>
 <MuiButton color={color} variant={variant}>
 {title}
 </MuiButton>
 </S.Wrapper>
 )
 }
```

Caso futuramente o material mude alguma coisa no Button deles, basta você arrumar neste único componente seu, evitando aquela corrida de procurar em todos os lugares que colocou o Button do material-ui.

### Components

Por fim, mas não menos importante, são todos os componentes especifico de sua aplicação.

Digamos que você esta desenvolvendo um blog. Nele terá uma página mostrando os autores dele.

Então nesta página terá uma pasta especifica para os cartão do autor (AuthorCard).

```bash
 Components/
 - AuthorCard/
 - Index.tsx
 - styles.scss
```

Exemplo do nosso componente AuthorCard utilizando suas moléculas.

```js
 import { Card } from 'src/DesignSystem/System/Card'

 import * as S from './styles'

 export type AuthorCardProps = {
 name: string
 description?: string
 }

 export default function AuthorCard({
 title,
 description
 return (
 <Card>
 <S.Title>
 {title}
 </S.Title>
 <S.Description>
 {description}
 </S.Description>
 </Card>
 )
 }
```

Então é isso galera. Isso não é a melhor arquitetura do mundo, mas é a arquitetura que até o momento mais tem me agradado e me feito mais produtivo.

Arquitetura e Design System em React

Arquitetura na prática para aquele seu projeto em react

Como criar templates de páginas no Next.js

Criando templates para páginas com Next.js