EdsonLuiz/ignews

Notas

CSS modules
SASS
_app e _documents
- _app é recarregado sempre que acontecer uma mudança de página.
- _document é carregado uma única vez durante a execução do app
google fonts
- configure para anonymous
- crossorigin

tag title deve ser definida no componente que renderiza a página

import Head from 'next/head'
export class Home {
  render() {
    return (
      <div>
        <Head>
          <title>My page title</title>
        </Head>
      </div>
    )
  }
}

Requisição SPA

No React tradicional todas as requisições HTTP são realizadas no lado do cliente, isto pode causar dois problemas.

A interface pode ser renderizada sem a resposta da API e ocorrer um re-render quando os dados da API forem retornados, causando um layout shift.
Quando a página for indexada os dados fornecidos pela API podem não estar disponíveis no momento da indexação.

Requisição SSR (Server Side Rendering)

O servidor embutido do Next vai ser utilizado para realizar as requisições HTTP, montar a página e devolver uma página completa para o navergador.
O SSR só funciona em páginas do Next e não em components. Para ter acesso a dados do servidor em um componente é necessário repassar este dado da página para o componente.

import {GetServerSideProps} from 'next'

export const getServerSideProps: GetServerSideProps = async () => {
  return {
    props: {name: 'Some', age: 99}
  }
}

SSG (Static Site Generation)

Salva o HTML de forma estática, isto pode evitar requisições HTTP desnecessárias e diminuir o consumo de recursos.
O getStaticProps vai ser executado uma vez e seu resultado vai ser salvo como uma página estática.
Pode ser utilizada a opção revalidate, que vai definir quanto tempo este HTML estático deve ser mantido até que seja gerado um novo documento com novos dados.

import {GetStaticProps} from 'next'

export const getStaticProps: GetStaticProps = async () => {
  return {
    props: {name: 'Some', age: 99},
    revalidade: 60 * 60 * 24; // 24 horas até que um novo documento seja gerado
  }
}

Quando utilizar?

SSG: Quando não existe problema caso a mesma página seja exibida para diferentes tipos de usuários.
SSR: Quando a página precisa de informações dinâmicas, dados diferentes de acordo com cada usuário.
Client-side: Quando os dados podem ser carregados depois da página ser renderizada sem causar grandes problemas.

Next-Auth

Adicione o pacote
```
yarn add next-auth
```
Cire uma api route pages/api/auth/[...nextauth].ts
Configure as keys no seu provider.

Adicione as keys no .env

PROVIDER_ID=YOUR_CLIENT_ID
PROVIDER_SECRET=YOUR_CLIENT_SECRET

Problemas ao seguir a documentação utilizando TypeScript? Olhe este link

Configure da forma antiga.

import NextAuth from "next-auth"
import Providers from "next-auth/providers"

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
      scope: 'read:user'
    }),
    // ...add more providers here
  ],
})

Configure um escopo de acordo com as necessidades da aplicação. github-scopes.
Para realizar signIn e signOut utilize a funções de mesmo nome do pacote next-auth/client. A função signIn recebe como parâmetro o nome do provider.
Utilize o hook useSession, do pacote next-auth/client, para recuperar dados da sessão do usuário logado.
```
const [session] = useSession()
```
Utilize a ContextAPI para compartilhar informações de autenticação entre os componentes.

O Next disponibiliza um Provider no pacote next-auth/client. Adicione este provider no arquivo _app.tsx.

import {Provider as NextAuthProvider} from 'next-auth/client'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <NextAuthProvider session={pageProps.session}>
       ...
    </NextAuthProvider>
  )
}
export default MyApp

pageProps.session utilizado para receber informações da sessão ativa do usuário.

Utilizando os callbacks do next-auth para salvar dados no faunaDB

Callbacks são funcões executadas como resposta de uma ação do next-auth. Utilize o callback signIn para salvar os dados do usuário, no faunaDB, durante o login.

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
      scope: 'read:user'
    }),
  ],
  callbacks: {
    async signIn({ user, account, profile, email, credentials }) {
      return true
    },
    async redirect({ url, baseUrl }) {
      return baseUrl
    },
    async session({ session, user, token }) {
      return session
    },
    async jwt({ token, user, account, profile, isNewUser }) {
      return token
    }
  }
})

Tenha cuidado ao escolher uma região no FaunaDB. Cada região tem um connection domain único, consulte

Region	Connection domain
US region group	db.us.fauna.com
EU region group	db.eu.fauna.com
Classic region group	db.fauna.com

export const fauna = new Client({
  secret: process.env.FAUNADB_KEY as string,
  domain: 'db.fauna.com',
})

Erro de JWT veja JSON Web Token Options

Realizando multiplas operações em uma única query do FaunaDB

import {query as q} from 'faunadb'
await fauna.query(
  q.If(
    q.Not(
      q.Exists(
        q.Match(
          q.Index('user_by_email'),
          q.Casefold(user.email)
        ) // Match
      ) // Exists
    ), // Not,
    q.Create(
      q.Collection('users'),
      {data: {email}}
    ), // Create
    q.Get(
      q.Match(
        q.Index('user_by_email'),
        q.Casefold(user.email)
      ) // Match
    )
  ) //if
)

Checkout session

Utilize o hook useSession(), do pacote next-auth/client, para verificar se o usuário está logado.
Evite que variáveis do .env sejam utilizadas no front-end.
NEXT_PUBLIC_ torna a váriavel pública para o front-end.
Operações que necessitam de mais segurança podem ser executadas no getServerSideProps(SSR), getStaticProps(SSG) e nas API Routes.
useSession() é um hook e não funciona dentro de uma API Route, é preciso acessar o token do usuário e recuperar os dados do usuário logado de dentro do cookie. Podemos contornar esta recuperaçao via cookie utilizando o getSession, do pacote next-auth/client, e receber os dados do usuário logado.
```
import {getSession} from 'next-auth/client'
const session = await getSession({req})
```

Uma checkout session pode ser criada pelo método POST ou através da SDK do Stripe.

JAM Stack

Javascript
API
Markup

CMS

Mais conhecidos

Wordpress
Drupal
Joomla
Magento

Headless CMS (Painel de administração + API HTTP | GrapQL | SD)

Strapi
Ghost
eyStone
GraphCMS
Prismic CMS
ContentFull
Shopfy
Saleor

Prismic

repository são projetos no prismic.
documents são os conteúdos
types são os tipos de cada conteúdo, sempre no singular
- repeatable vários deste mesmo tipo (posts, produto)
- single só vai existir um deste tipo (títulos)

Com os tipos de dados configurados é necessário configurar o acesso ao conteúdo. Por padrão o acesso a sua API é publico, caso seja necessário este comportamento pode ser alterado.

settings > API & Security > Repository Security

Prismic client

Documentação para inicializar a interface do prismic client. lin
Use getStaticProps para evitar buscar dados do prismic a todo o momento, preservando o seu limite de dados trafegados mensalmente.

Link ativo

'useRouter' do pacote next/router utilizar asPath para para ter informação da rota que está sendo acessada.
Para evitar repetição de código pode ser criado um componente que devolve um next/link com a lógica de verificação de link ativo.
Dentro do novo componente pode ser utilizada a função 'cloneElement' do pacote react para adicionar propriedades ao children dentro de um componente.

Notas sobre a criação da feature de Post

Toda página gerada de forma estática não pode ser protegida. Utilize getServerSideProps() SSR para gerar páginas protegidas do lado do servidor.

Busque a sessão com getSession({req}) passando como argumento o req recebido como parâmetro no getServerSideProps().

export const getServerSideProps: GetServerSideProps = ({req}) = {
  const session = getSession({req })
}

Ao tentar buscar o slug dos parâmetros da requisição o TS pode apresentar alguns erros de lint. Para contornar estes erros declare uma interface que extende ParsedUrlQuery e contenha todos os parametros que a requisição pode receber.

import { ParsedUrlQuery } from 'querystring'

interface IParams extends ParsedUrlQuery {
  slug: string
}

export const getServerSideProps: GetServerSideProps = async ({req, params}) => {
  const session = await getSession({req})
  const {slug} = params as IParams
  ...
}

RichText.[asText, asHtml] do pacote prismic-dom são utilizados para obter dados formatados da API do Prismic.
propriedade/ atributo dangerouslySetInnerHTML utilizada para renderizar conteúdo html.
```
<div dangerouslySetInnerHTML={{__html: content}} />
```

Compartilhar informações pelo session

Dentro do Componente do nextAuth pode ser utilizado o callback session que permite modificar dados da sessão.

Redirecionamento dentro do método getServerSideProps basta não retornar as props e sim o redirect.

return {
  redirect: {
    destination: '/',
    permanent: false  // não é permanente, mas um redirect que depende de uma action
                      // indica para os indexadores que este redirect pode não existir ou acontecer
  }
}

EdsonLuiz / ignews