next optimized images
v2.6.1
A versão 3 está chegando! Ele apresenta uma reescrita completa com muitos novos recursos e bugs. Se você deseja ajudar a desenvolver e testar a próxima versão principal, consulte a filial Canary para obter instruções de instalação e mais informações sobre os novos recursos. (Edição da RFC)
Otimize automaticamente as imagens usadas nos Projetos Next.js ( jpeg , png , svg , webp e gif ).
Os tamanhos das imagens geralmente podem ser reduzidos entre 20-60%, mas essa não é a única coisa que faz next-optimized-images :
webp em tempo real para um tamanho ainda menorSVG sprites para obter um melhor desempenho ao usar os mesmos ícones várias vezes (por exemplo, em uma lista) npm install next-optimized-images
O nó> = 8 é necessário para a versão 2. Se você precisar oferecer suporte a versões de nó mais antigas, ainda poderá usar a versão 1 do próximo otimizado.
Habilite o plugin no seu arquivo de configuração Next.js:
// next.config.js
const withPlugins = require ( 'next-compose-plugins' ) ;
const optimizedImages = require ( 'next-optimized-images' ) ;
module . exports = withPlugins ( [
[ optimizedImages , {
/* config for next-optimized-images */
} ] ,
// your other plugins here
] ) ;Consulte a seção de configuração para todas as opções disponíveis.
O exemplo acima usa a próxima composição-pluguins para uma API mais limpa ao usar muitos plugins, consulte o seu ReadMe para um exemplo mais detalhado. next-optimized-images também funcionam com a API de plug-in padrão:
// next.config.js
const withOptimizedImages = require ( 'next-optimized-images' ) ;
module . exports = withOptimizedImages ( {
/* config for next-optimized-images */
// your config for other plugins or the general next.js here...
} ) ; A partir da versão 2, você deve instalar os pacotes de otimização necessários em seu projeto, além deste plug -in. next-optimized-images detectam todos os pacotes suportados e os usa.
Portanto, você só precisa instalar esses pacotes com o NPM, não há etapa adicional necessária depois disso.
Os seguintes pacotes de otimização estão disponíveis e suportados:
| Pacote de otimização | Descrição | Link do projeto |
|---|---|---|
imagemin-mozjpeg | Otimiza imagens JPEG. | Link |
imagemin-optipng | Otimiza imagens PNG. | Link |
imagemin-pngquant | Alternativa para otimizar imagens PNG. | Link |
imagemin-gifsicle | Otimiza imagens GIF. | Link |
imagemin-svgo | Otimiza imagens e ícones SVG. | Link |
svg-sprite-loader | Adiciona a possibilidade de usar sprites SVG para um melhor desempenho. Leia a seção Sprite para obter mais informações. | Link |
webp-loader | Otimiza as imagens do WebP e pode converter imagens JPEG/PNG em Webp on the Fly (WebP Resource Query). | Link |
lqip-loader | Gera espaços reservados para imagens de baixa qualidade e pode extrair as cores dominantes de uma imagem (consulta de recursos lqip) | Link |
responsive-loader | Pode redimensionar imagens em tempo real e criar várias versões para um srcset .IMPORTANTE : Você precisa instalar adicionalmente jimp (implementação do nó, mais lento) ou sharp (binário, mais rápido) | Link |
image-trace-loader | Gera esboços de imagem SVG, que podem ser usados como espaço reservado enquanto carrega a imagem original (consulta de recursos do Trace). | Link |
Exemplo: se você possui imagens JPG, PNG e SVG em seu projeto, precisará executar
npm install imagemin-mozjpeg imagemin-optipng imagemin-svgo
Para instalar todos os pacotes opcionais, execute:
npm install imagemin-mozjpeg imagemin-optipng imagemin-gifsicle imagemin-svgo svg-sprite-loader webp-loader lqip-loader responsive-loader jimp image-trace-loaderoptimizeImagesInDev .
Dependendo da sua configuração de compilação/implantação, também é possível instalá -las como dependências. Apenas certifique -se de que os pacotes estejam disponíveis ao criar seu projeto.
Desde a versão 2.5, os arquivos ico também são opcionalmente suportados, mas precisam ser ativados na configuração handleImages .
Agora você pode importar ou exigir suas imagens diretamente em seus componentes do React:
import React from 'react' ;
export default ( ) => (
< div >
< img src = { require ( './images/my-image.jpg' ) } />
< img src = { require ( './images/my-small-image.png' ) } />
< img src = { require ( './images/my-icon.svg' ) } />
</ div >
) ;
/**
* Results in:
*
* <div>
* <img src="/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg" />
* <img src="data:image/png;base64,..." />
* <img src="/_next/static/images/my-icon-572812a2b04ed76f93f05bf57563c35d.svg" />
* </div>
*/Esteja ciente de que as imagens são otimizadas apenas em produção por padrão para reduzir o tempo de construção em seu ambiente de desenvolvimento.
Se você estiver usando os módulos CSS, este pacote também detecta imagens e otimizou -os em valores de url() em seus arquivos CSS/SASS/LESS:
.Header {
background-image : url ( ' ./images/my-image.jpg ' );
}
/* *
* Results in:
*
* .Header {
* background-image: url('/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg');
* }
*/ Se o arquivo estiver abaixo do limite para imagens em preenchimento, o require(...) retornará um Data-URI base64 ( data:image/jpeg;base64,... ).
Caso contrário, next-optimized-images copiarão sua imagem na pasta estática do Next.js e o require(...) retornará o caminho para sua imagem neste caso ( /_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg ).
Você pode usar as duas variantes diretamente em uma imagem no atributo src ou no seu arquivo CSS dentro de um valor de url() .
Se você estiver usando o Flow ou o Eslint-Plugin-Import e estiver enfrentando alguns problemas com parâmetros de consulta, confira a solução publicada por @Eleith.
Existem alguns casos em que você não deseja fazer referência a um arquivo ou obter um Data-URI base64, mas você realmente deseja incluir o arquivo RAW diretamente no seu HTML. Especialmente para SVGs porque você não pode estilizá -los com CSS se eles estiverem em um atributo src em uma imagem.
Portanto, existem opções adicionais que você pode especificar como parâmetros de consulta ao importar as imagens.
?include : inclua o arquivo bruto diretamente (útil para ícones SVG)?webp : converta uma imagem JPEG/PNG em Webp on the Fly?inline : Force Inlining uma imagem (Data-Uri)?url : Força um URL para uma imagem pequena (em vez de dados-URI)?original : use a imagem original e não otimize -a?lqip : gerar um espaço reservado para imagem de baixa qualidade?lqip-colors : extraia as cores dominantes de uma imagem?trace : use contornos rastreados como espaço reservado para carregar?resize : redimensione uma imagem?sprite : use svg sprites A imagem agora será incluída diretamente no seu HTML sem um Data-URI ou uma referência ao seu arquivo.
Como descrito acima, isso é útil para SVGs para que você possa estilizá -los com CSS.
import React from 'react' ;
export default ( ) => (
< div dangerouslySetInnerHTML = { { __html : require ( './images/my-icon.svg?include' ) } } />
) ;
/**
* Results in:
*
* <div>
* <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
* <path d="M8 0C3.589 0 0 3.589 0 8s3.589 ..." style="filled-opacity:1" fill-rule="evenodd">
* </path>
* </svg>
* </div>
*/A imagem ainda será otimizada, mesmo que esteja diretamente incluída no seu conteúdo (mas por padrão apenas na produção).
Requer o pacote de otimização opcional
webp-loader(npm install webp-loader)
O WebP é um formato de imagem ainda melhor e menor, mas ainda não é tão comum e os desenvolvedores geralmente recebem apenas imagens JPEG/PNG.
Se este parâmetro de consulta ?webp for especificado, next-optimized-images convertem automaticamente uma imagem JPEG/PNG no novo formato WebP.
Para os navegadores que ainda não suportam o WebP, você também pode fornecer um fallback usando a tag <picture> :
import React from 'react' ;
export default ( ) => (
< picture >
< source srcSet = { require ( './images/my-image.jpg?webp' ) } type = "image/webp" />
< source srcSet = { require ( './images/my-image.jpg' ) } type = "image/jpeg" />
< img src = { require ( './images/my-image.jpg' ) } />
</ picture >
) ;
/**
* Results in:
* <picture>
* <source srcset="/_next/static/images/my-image-d6816ecc28862cf6f725b29b1d6aab5e.jpg.webp" type="image/webp" />
* <source srcset="/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg" type="image/jpeg" />
* <img src="/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg" />
* </picture>
*/ Você pode especificar um limite para imagens embutidas, que o incluirão como um URI de dados diretamente em seu conteúdo, em vez de referenciar um arquivo se o tamanho do arquivo estiver abaixo desse limite.
Você geralmente não deseja especificar um limite muito alto, mas pode haver casos em que você ainda deseja inline imagens maiores.
Nesse caso, você não precisa definir o limite global como um valor mais alto, mas pode adicionar uma exceção a uma única imagem usando as opções de consulta ?inline .
import React from 'react' ;
export default ( ) => (
< img src = { require ( './images/my-image.jpg?inline' ) } />
) ;
/**
* Results in:
*
* <img src="data:image/png;base64,..." />
*
* Even if the image size is above the defined limit.
*/ O inline será aplicado apenas a essa importação; portanto, se você importar a imagem pela segunda vez sem a opção ?inline , ela será normalmente referenciada como um arquivo se estiver acima do seu limite.
Quando você tem uma imagem menor que o seu limite definido para inline, ela normalmente fica inlinada automaticamente. Se você não deseja que um arquivo pequeno específico seja inlinado, pode usar o ?url Consulta Param para sempre recuperar um URL da imagem, independentemente do limite em linha.
Se você estiver usando muito essa opção, também poderá fazer sentido desativar completamente o embutido e usar o param ?inline para arquivos únicos.
import React from 'react' ;
export default ( ) => (
< img src = { require ( './images/my-image.jpg?url' ) } />
) ;
/**
* Results in:
*
* <img src="/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg" />
*
* Even if the image size is below the defined inlining limit.
*/ O inline será desativado apenas para exatamente essa importação; portanto, se você importar a imagem pela segunda vez sem a opção ?url , ela ficará inlinada novamente se estiver abaixo do seu limite.
A imagem não será otimizada e usada como é. Faz sentido usar este parâmetro de consulta se você conhece uma imagem já foi otimizada (por exemplo, durante a exportação), para que não seja otimizada novamente pela segunda vez.
import React from 'react' ;
export default ( ) => (
< img src = { require ( './images/my-image.jpg?original' ) } />
) ; Isso também pode ser combinado com a consulta ?original&inline recursos ?url ou ?inline
Requer o pacote opcional
lqip-loader(npm install lqip-loader)
Ao usar esta consulta de recursos, uma imagem muito pequena (cerca de 10x7 pixels) é criada. Você pode exibir essa imagem como um espaço reservado até que a imagem real (grande) tenha carregado.
Você normalmente esticará esta pequena imagem do mesmo tamanho que a imagem real é, como o Medium.com . Para fazer com que a imagem esticada pareça melhor no Chrome, confira esta solução e adicione um filtro de desfoque à sua imagem.
import React from 'react' ;
export default ( ) => (
< img src = { require ( './images/my-image.jpg?lqip' ) } />
) ;
/**
* Replaces the src with a tiny image in base64.
*/ Requer o pacote opcional
lqip-loader(npm install lqip-loader)
Esta consulta de recursos retorna uma matriz com valores hexadecimais das cores dominantes de uma imagem. Você também pode usar isso como um espaço reservado até que a imagem real tenha carregado (por exemplo, como plano de fundo), como a pesquisa de imagens do Google .
O número de cores retornadas pode variar e depende de quantas cores diferentes sua imagem tem.
import React from 'react' ;
export default ( ) => (
< div style = { { backgroundColor : require ( './images/my-image.jpg?lqip-colors' ) [ 0 ] } } > ... </ div >
) ;
/**
* require('./images/my-image.jpg?lqip-colors')
*
* returns for example
*
* ['#0e648d', '#5f94b5', '#a7bbcb', '#223240', '#a4c3dc', '#1b6c9c']
*/ Requer o
image-trace-loaderdo pacote opcional (npm install image-trace-loader)
Com a consulta de recursos ?trace , você pode gerar esboços de imagem SVG, que podem ser usados como espaço reservado enquanto carregam a imagem original.
import React from 'react' ;
import MyImage from './images/my-image.jpg?trace' ;
export default ( ) => (
< div >
< img src = { MyImage . trace } /> { /* <-- SVG trace */ }
< img src = { MyImage . src } /> { /* <-- Normal image which you want to lazy load */ }
</ div >
) ;
/**
* Results in:
*
* <div>
* <img src="data:image/svg+xml,...">
* <img src="/_next/static/images/image-trace-85bf5c58ce3d91fbbf54aa03c44ab747.jpg">
* </div>
*/ require('./images/my-image.jpg?trace') retorna um objeto que contém o rastreamento ( trace ) como um SVG inlinado e a imagem normal ( src ) que também é otimizada.
O rastreamento terá exatamente a mesma largura e altura que sua imagem normal.
As opções para o carregador podem ser definidas na configuração do plug -in.
Requer o
responsive-loaderdo pacote opcional (npm install responsive-loader) ejimp(implementação do nó, mais lento) ousharp(binário, mais rápido)
Após a consulta de recursos ?resize , você pode adicionar qualquer outra consulta do responsive-loader que permite redimensionar imagens e criar conjuntos de origem inteira.
import React from 'react' ;
const oneSize = require ( './images/my-image.jpg?resize&size=300' ) ;
const multipleSizes = require ( './images/my-image.jpg?resize&sizes[]=300&sizes[]=600&sizes[]=1000' ) ;
export default ( ) => (
< div >
{ /* Single image: */ }
< img src = { oneSize . src } />
{ /* Source set with multiple sizes: */ }
< img srcSet = { multipleSizes . srcSet } src = { multipleSizes . src } />
</ div >
) ; Se apenas o param size ou sizes for usado, o param ?resize também poderá ser omitido (por exemplo my-image.jpg?size=300 ). Mas é necessário para todos os outros parâmetros do responsive-loader .
Você também pode definir configurações globais na propriedade responsive (no arquivo next.config.js ) e definir, por exemplo, tamanhos de padrão que serão gerados quando você não especificar um para uma imagem (por exemplo, apenas my-image.jpg?resize
Requer os pacotes de otimização opcional
imagemin-svgoesvg-sprite-loader(npm install imagemin-svgo svg-sprite-loader)
Se você precisar estilizar ou animar seus SVGs ?sprite
import React from 'react' ;
import MyIcon from './icons/my-icon.svg?sprite' ;
export default ( ) => (
< div >
my page..
< MyIcon />
</ div >
) ; Todos os adereços passados para o sprite importado serão aplicados ao elemento <svg> , para que você possa adicionar uma classe normalmente com <MyIcon className="icon-class" /> .
O objeto svg-sprite-loader também é exposto se você deseja criar seu próprio componente:
import React from 'react' ;
import icon from './icons/icon.svg?sprite' ;
export default ( ) => (
< div >
my page..
< svg viewBox = { icon . viewBox } >
< use xlinkHref = { `# ${ icon . id } ` } />
</ svg >
</ div >
) ; Para fazer isso também funcionar para a renderização do lado do servidor, você precisa adicionar essas alterações ao seu arquivo _document.jsx (leia aqui se ainda não tiver esse arquivo):
// ./pages/_document.js
import Document , { Head , Main , NextScript } from 'next/document' ;
import sprite from 'svg-sprite-loader/runtime/sprite.build' ;
export default class MyDocument extends Document {
static async getInitialProps ( ctx ) {
const initialProps = await Document . getInitialProps ( ctx ) ;
const spriteContent = sprite . stringify ( ) ;
return {
spriteContent ,
... initialProps ,
} ;
}
render ( ) {
return (
< html >
< Head > { /* your head if needed */ } </ Head >
< body >
< div dangerouslySetInnerHTML = { { __html : this . props . spriteContent } } />
< Main />
< NextScript />
</ body >
</ html >
) ;
}
} Este plug-in usa o carregador IMG sob o capô, baseado em mozjpeg, optipng, gifsicle e svgo.
As opções padrão para esses otimizadores devem ser suficientes na maioria dos casos, mas você pode substituir todas as opções disponíveis, se desejar.
Tipo: string[]
Padrão: ['jpeg', 'png', 'svg', 'webp', 'gif']
next-optimized-images registra o carregador webpack para todos esses tipos de arquivos. Se você não deseja um desses manipulados por imagens otimizadas, porque você, por exemplo, possui outra regra de plug-in ou carregador personalizado, basta removê-lo da matriz.
Observe que uma imagem que está sendo manipulada não significa que também é otimizada automaticamente. O pacote de otimização necessário para essa imagem também deve ser instalado. Leia a seção Pacotes de otimização para obter mais informações.
Se uma imagem for tratada, mas não otimizada, significa que a imagem original será usada e copiada para a compilação.
Desde a versão 2.5, os arquivos ico também são suportados, mas para compatibilidade com versões anteriores, eles precisam ser ativados manualmente. Ao adicionar 'ico' à matriz handleImages , o plug -in também lidará com os arquivos ico .
Tipo: number
Padrão: 8192
Os arquivos menores ficarão inlinados com um Data-URI pelo URL-LOADER. Este número define o tamanho máximo do arquivo (em bytes) para que as imagens sejam inlinadas. Se uma imagem for maior, ela será copiada para a pasta estática do próximo.
As imagens serão otimizadas nos dois casos.
Para desativar completamente a imagem inline, defina esse valor como -1 . Você sempre receberá um URL de imagem.
Tipo: string
Padrão: 'images'
Nome da pasta dentro /static/ em que as imagens serão copiadas durante a construção.
Tipo: string
Padrão: `/_next/static/${imagesFolder}/`
O caminho público que deve ser usado para URLs de imagem. Isso pode ser usado para servir a imagem otimizada de um serviço de armazenamento em nuvem como o S3.
Na versão 2, o próximo otimizado-Images usa a configuração assetPrefx do Next.js por padrão, mas você pode substituí-lo pelo imagesPublicPath especialmente para imagens.
Tipo: string
Padrão: `static/${imagesFolder}/`
O caminho de saída que deve ser usado para imagens. Isso pode ser usado para ter uma pasta de saída personalizada.
Tipo: string
Padrão: '[name]-[hash].[ext]'
O nome do arquivo das imagens otimizadas. Certifique -se de manter a parte [hash] para que eles recebam um novo nome de arquivo se o conteúdo for alterado.
Tipo: boolean
Padrão: false
Quando as imagens se converteram no WebP em tempo real, .webp foi anexado ao nome do arquivo. Por exemplo, test.png tornou -se test.png.webp . Se você deseja ter apenas uma extensão de nome de arquivo como test.webp , poderá definir esta opção como true .
Tipo: boolean
Padrão: false
Para o desenvolvimento mais rápido e a HMR, as imagens não serão otimizadas por padrão ao executar no modo de desenvolvimento. Na produção, as imagens sempre serão otimizadas, independentemente dessa configuração.
Requer o pacote de otimização opcional
imagemin-mozjpeg(npm install imagemin-mozjpeg)
Tipo: object
Padrão: {}
Mozjpeg é usado para otimizar imagens JPEG. Você pode especificar as opções para isso aqui. As opções padrão do mozjpeg são usadas se você omitir esta opção.
Requer o pacote de otimização opcional
imagemin-optipng(npm install imagemin-optipng)
Tipo: object
Padrão: {}
O OPTIPNG é usado para otimizar imagens PNG por padrão. Você pode especificar as opções para isso aqui. As opções padrão do optipng são usadas se você omitir esta opção.
Requer o pacote de otimização opcional
imagemin-pngquant(npm install imagemin-pngquant)
Tipo: object
Padrão: {}
O PNGQUANT é uma maneira alternativa de otimizar imagens PNG. As opções padrão do pngquant são usadas se você omitir esta opção.
Requer o pacote de otimização opcional
imagemin-gifsicle(npm install imagemin-gifsicle)
Tipo: object
Padrão:
{
interlaced : true ,
optimizationLevel : 3 ,
} Gifsicle é usado para otimizar imagens GIF. Você pode especificar as opções para isso aqui. As opções padrão do gifsicle são usadas se você omitir esta opção.
Requer o pacote de otimização opcional
imagemin-svgo(npm install imagemin-svgo)
Tipo: object
Padrão: {}
O SVGO é usado para otimizar imagens e ícones SVG. Você pode especificar as opções para isso aqui. As opções padrão do svgo são usadas se você omitir esta opção.
Os plugins SVGO único podem ser desativados/ativados na matriz de plugins:
{
svgo : {
plugins : [
{ removeComments : false }
]
}
} Requer os pacotes de otimização opcional
imagemin-svgoesvg-sprite-loader(npm install imagemin-svgo svg-sprite-loader)
Tipo: object
Padrão:
{
runtimeGenerator : require . resolve ( path . resolve ( 'node_modules' , 'next-optimized-images' , 'svg-runtime-generator.js' ) ) ,
} Ao usar a opção SVG Sprite, svg-sprite-loader é usado internamente. Você pode substituir a configuração passada para este carregador aqui.
Requer o pacote de otimização opcional
webp-loader(npm install webp-loader)
Tipo: object
Padrão: {}
O ImagEMin-Webp é usado para otimizar imagens do WebP e converter outros formatos em Webp. Você pode especificar as opções para isso aqui. As opções padrão do imagemin-webp são usadas se você omitir esta opção.
Requer o
image-trace-loaderdo pacote opcional (npm install image-trace-loader)
Tipo: object
Padrão: {}
Ao usar image-trace-loader para a consulta de recursos ?trace , você pode definir todas as opções para o carregador de rastreamento de imagem neste objeto. As opções padrão do image-trace-loader são usadas se você omitir esta opção.
Requer o pacote de otimização opcional
responsive-loader(npm install responsive-loader)
Tipo: object
Padrão: {}
A configuração para o responsive-loader pode ser definida aqui.
Requer o pacote de otimização opcional
responsive-loader(npm install responsive-loader)
Tipo: string
Padrão: 'img-loader'
Por padrão, o IMG-LOADER lida com a maioria das solicitações. No entanto, se você usar muito o responsive-loader e não quiser adicionar o param de consulta ?resize a todos os requisitos, poderá definir esse valor como 'responsive-loader' .
Depois disso, responsive-loader lidará com todas as imagens JPEG e PNG por padrão, mesmo sem um parâmetro de consulta adicional. Esteja ciente de que você não pode usar nenhum dos parâmetros de consulta next-optimized-images fornecem mais nessas imagens, porque a solicitação apenas aumenta e não é mais modificada. Todos os outros formatos (SVG, Webp e GIF) ainda funcionam como antes com o img-loader e, portanto, todos os parâmetros de consulta disponíveis.
Tipo: boolean
Padrão: true
Se você não tiver nenhum pacote de otimização instalado, nenhuma imagem será otimizada. Nesse caso, um aviso é escrito no console durante a construção para informá -lo sobre uma possível configuração incorreta. Se essa configuração estiver pretendida e você realmente não deseja que as imagens sejam otimizadas, poderá definir esse valor como false e não receberá mais o aviso.
As opções especificadas aqui são os valores padrão .
Portanto, se eles forem bons o suficiente para o seu caso de uso, você não precisará especificá next.config.js los para ter um arquivo mais curto e mais limpo.
// next.config.js
const withPlugins = require ( 'next-compose-plugins' ) ;
const optimizedImages = require ( 'next-optimized-images' ) ;
module . exports = withPlugins ( [
[ optimizedImages , {
// these are the default values so you don't have to provide them if they are good enough for your use-case.
// but you can overwrite them here with any valid value you want.
inlineImageLimit : 8192 ,
imagesFolder : 'images' ,
imagesName : '[name]-[hash].[ext]' ,
handleImages : [ 'jpeg' , 'png' , 'svg' , 'webp' , 'gif' ] ,
removeOriginalExtension : false ,
optimizeImages : true ,
optimizeImagesInDev : false ,
mozjpeg : {
quality : 80 ,
} ,
optipng : {
optimizationLevel : 3 ,
} ,
pngquant : false ,
gifsicle : {
interlaced : true ,
optimizationLevel : 3 ,
} ,
svgo : {
// enable/disable svgo plugins here
} ,
webp : {
preset : 'default' ,
quality : 75 ,
} ,
} ] ,
] ) ; next.config.jsMIT © Cyril Wanner
