next on netlify
v3.0.1
Estamos depreciando next-on-netlify em favor do plug-in de construção essencial do Next.js do Netlify. Visite esta edição para saber mais sobre a depreciação do next-on-netlify e faça qualquer pergunta. Você também pode visitar nosso Doc simples de migração para obter assistência migrando para o plug -in.
next-on-netlify é um utilitário para ativar a renderização do lado do servidor no Next.js no netlify. Ele envolve seu aplicativo em uma pequena camada de compatibilidade, para que as páginas possam usar as funções do NetLify para serem renderizadas no lado do servidor.
getStaticPaths npm install --save next-on-netlify
Devemos criar nosso aplicativo Next.js como um aplicativo sem servidor. Você pode ler mais sobre o servidor sem servidor.js aqui.
É super simples. Basta criar um arquivo next.config.js na raiz do seu projeto e escrever o seguinte:
// next.config.js
module . exports = {
// Target must be serverless
target : "serverless" ,
} ;Se forem necessários binários na implantação, a seguinte configuração é necessária (o prisma é um exemplo):
// next.config.js
module . exports = {
// Target must be experimental-serverless-trace
// Your build time will be longer with this option
target : "experimental-serverless-trace" ,
} ; O pacote próximo no Netlify adiciona o comando next-on-netlify . Quando executamos esse comando, alguma mágica prepara nosso aplicativo Next.js para hospedagem no netlify*.
Queremos que o comando seguinte no Netlify seja executado após a criação do nosso aplicativo Next.js. Então, vamos adicionar um gancho de pós -construção ao nosso arquivo package.json. Você deve adicionar "postbuild": "next-on-netlify" para os scripts existentes, assim:
{
"name": "my-nextjs-app",
"scripts": {
"dev": "next",
"build": "next build",
"postbuild": "next-on-netlify"
},
...
}
*Se você está curioso sobre o "Magic", confira o arquivo bem documentado next-on-netlify.js .
Estamos quase terminados! Só temos que informar a Netlify como criar nosso aplicativo Next.js, onde a pasta Funções está localizada e qual pasta para fazer upload no seu CDN. Fazemos isso com um arquivo netlify.toml na raiz do seu projeto e nas seguintes instruções:
[ build ]
command = " npm run build "
functions = " out_functions "
publish = " out_publish " Nota: out_functions e out_publish são codificados no próximo diante. Estes não são configuráveis no momento.
Se o seu projeto contiver submódulos particulares, para implantá -lo, você precisará:
Gere uma chave de implantação no netlify e adicione -a aos submódulos relevantes para que eles possam ser clonados durante o processo de implantação.
Verifique se os controles remotos do submodule estão definidos como formato ssh (ou seja, [email protected]:owner/project.git , não https://... ). Dentro do diretório submodule, o controle remoto do Git pode ser atualizado com:
# git remote set-url [remote] [url]
git remote set-url origin [email protected]:owner/project.gitTerminamos. Vamos implantar
Se você não estiver familiarizado com o Netlify, siga as instruções de implantação aqui: https://www.netlify.com/blog/2020/11/30/how-te-deploy-next.js-sites-to-netlify/
Eu recomendo que você ainda use next dev para criar e visualizar seu aplicativo localmente.
Mas se você deseja imitar a implantação do Netlify no seu computador, também poderá next-on-netlify Localmente e usar netlify-cli para visualizar o resultado.
Primeiro, instale a versão mais recente do netlify-cli (você também pode olhar para o package.json para ver a versão com a qual a rede seguinte foi testada):
npm install -g netlify-cli Em seguida, adicione o seguinte bloco [dev] ao seu netlify.toml :
# netlify.toml
# [build]
# ...
[ dev ]
functions = " out_functions "
publish = " out_publish "
# We manually set the framework to static, otherwise Netlify automatically
# detects Next.js and redirects do not work.
# Read more: https://github.com/netlify/cli/blob/master/docs/netlify-dev.md#project-detection
framework = " #static " Por fim, adicione as seguintes linhas ao seu .gitignore :
# .gitignore
# Files generated by next-on-netlify command
/out_publish/
/out_functions/Agora você está pronto.
A partir de agora, sempre que você quiser visualizar seu aplicativo localmente, basta executar:
npx next-on-netlify watch : Isso será executado next build para construir seu aplicativo Next.js e next-on-netlify Para preparar seu aplicativo Next.js para compatibilidade com o Netlify. Qualquer alteração do código -fonte acionará outra compilação.netlify dev : Isso imitará o Netlify no seu computador e permitirá que você visualize seu aplicativo em http://localhost:8888 .Observação:
O modo de visualização ainda não está disponível localmente, executando netlify dev , para páginas estáticas sem revalidar ou fazer de fallback. Isso será apoiado em breve.
Por enquanto, o modo de visualização é suportado na produção para todos os tipos de página do Next.JS.
Você pode definir redirecionamentos personalizados em _redirects e/ou no seu arquivo netlify.toml . A precedência dessas regras é:
_redirectsnext-on-netlify NETRABILIDADE Atualmente, não há suporte para redirecionamentos definidos no seu arquivo netlify.toml .
Leia mais sobre os redirecionamentos do Netlify aqui.
next-on-netlify Cria uma função Netlify para cada uma das suas páginas SSR e terminais da API. Atualmente, você só pode criar funções Netlify personalizadas usando @netlify/plugin-nextjs.
Se a sua página/rota da API Next.js terminar no -background , ele será tratado como uma função de fundo do NetLify. Nota: As funções de fundo estão disponíveis apenas em determinados planos.
Você pode usar a identidade do netlify com next-on-netlify . Para todas as páginas com renderização do lado do servidor (getInitialProps*, getServersideProps e rotas de API), você pode acessar o objeto ClientContext através do parâmetro req .
Por exemplo:
const Page = ( ) => < p > Hello World! </ p > ;
export const getServerSideProps = async ( { req } ) => {
// Get event and context from Netlify Function
const {
netlifyFunctionParams : { event , context } ,
} = req ;
// Access Netlify identity
const { identity , user } = context . clientContext ;
return {
props : { } ,
} ;
} ;
export default Page ;Para acessar a identidade do netlify a partir de páginas sem renderização do lado do servidor, você pode criar uma próxima rota da API que execute a lógica relacionada à identidade:
export default async function getUser ( req , res ) {
// Get event and context from Netlify Function
const {
netlifyFunctionParams : { event , context } ,
} = req ;
// Access Netlify identity
const { user } = context . clientContext ;
// Respond with user object
res . json ( { user } ) ;
}* Observe que as páginas usando o GetInitialProps são apenas do lado do servidor renderizadas no carregamento inicial da página e não quando o usuário navega no lado do cliente entre as páginas.
getStaticPaths As páginas de Fallback se comportam de maneira diferente com next-on-netlify do que com o próximo.js. No Next.js, ao navegar para um caminho que não é definido no getStaticPaths , ele exibe primeiro a página de retorno. Em seguida, o js gera o HTML em segundo plano e o armazena em cache para solicitações futuras.
Com next-on-netlify , ao navegar para um caminho que não é definido no getStaticPaths , o lado do servidor renderiza a página e a envia diretamente para o usuário. O usuário nunca vê a página de Fallback. A página não está em cache para solicitações futuras.
Para saber mais sobre isso, veja: Edição #7
Nossa solução existente para a próxima/imagem não é muito executada. Temos melhorias de desempenho em nosso roteiro, dependente do trabalho interno.
Para obter melhor desempenho agora, recomendamos o uso de um provedor de nuvem como o Cloudinary (consulte o próximo.js docs).
Este pacote é mantido por Lindsay Levine, Finn Woelm e Cassidy Williams.
Grite para @MottOx2 (um pioneiro de hospedagem Next.js no netlify) e @danielcondemarin (autor de servidorless-next.js para a AWS). Os dois foram grandes inspirações para este pacote.
? Grande "obrigado" às seguintes pessoas por suas contribuições, apoio e testes beta:
Os seguintes sites são construídos com next-on-netlify :
opinião
missionbit.org (#18)
Gemini.com
bigbinary.com
Crie seu próprio blog e implante para Netlify!
Você está construindo algo incrível com next-on-netlify ? Informe -nos e nós o apresentaremos aqui :)
