- 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
- configure para
- 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> ) } }
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.
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}
}
}
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
}
}
- 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.
- 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
esignOut
utilize a funções de mesmo nome do pacotenext-auth/client
. A funçãosignIn
recebe como parâmetro o nome do provider. - Utilize o hook
useSession
, do pacotenext-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.
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
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
)
- 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 nasAPI 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 ogetSession
, 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.
- Javascript
- API
- Markup
Mais conhecidos
- Wordpress
- Drupal
- Joomla
- Magento
- Strapi
- Ghost
- eyStone
- GraphCMS
- Prismic CMS
- ContentFull
- Shopfy
- Saleor
repository
são projetos no prismic.documents
são os conteúdostypes
são os tipos de cada conteúdo, sempre no singularrepeatable
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
- 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.
- '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.
- 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}} />
- 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 } }