O Storybook é uma ferramenta poderosa para construir componentes de interface do usuário isoladamente. Ele ajuda você a criar e testar componentes sem executar todo o aplicativo.
Se você já usou Storybook com Next.js, notará que precisa configurá-lo para lidar com CSS e imagens corretamente. O processo pode ser frustrante, mas essas etapas simples ajudarão a mostrar o caminho.
Comece configurando o projeto Next.js
Se você ainda não tem um projeto Next.js configurado, siga as instruções oficiais Next.js Guia de introdução para criar um novo projeto.
Inicializar livro de histórias
Execute o seguinte comando no terminal para inicializar o Storybook.
npx sb init --builder webpack5
Este comando detecta o projeto em que você está trabalhando, instala todos os pacotes necessários e cria histórias de exemplo.
Configurar CSS
A primeira coisa que você precisa fazer é incluir o arquivo CSS global em preview.js.
Configurar estilos globais
Os estilos globais se aplicam a todo o aplicativo. Para aplicar esses estilos em histórias, você pode importar o arquivo para histórias individuais e isso funcionaria. No entanto, você acabaria reescrevendo a instrução de importação em muitas histórias ou até mesmo se esquecendo de fazê-lo.
Uma solução melhor é importar os estilos globais no arquivo .storybook/preview.js file, um arquivo que contém todas as configurações compartilhadas para o Storybook.
Na parte superior de .storybook/preview.js, inclua a seguinte instrução de importação.
importar "../styles/globals.css";
Configurar Sass para Storybook em Next.js
Por padrão, o Storybook não vem com suporte pronto para uso para o Linguagem de extensão Sass. Você precisa estender a configuração do webpack instalando style-loader, css-loader e sass-loader.
npm i-D style-loader css-loader sass-loader
Aqui está o que esses pacotes fazem:
- style-loader injeta CSS no DOM.
- css-loader interpreta @import e URL() como import/require e os resolve.
- sass-loader carrega SCSS em CSS.
Para configurar esses pacotes, adicione o seguinte código em .storybook/main.js:
const caminho = exigir('caminho');
módulo.exportações = {
// outras configurações
webpackFinal: assíncrono (configuração) => {
config.module.rules.push(
{
teste: /\\.s(a|c)ss$/,
incluem: path.resolve (__dirname, '../'),
usar: [
'carregador de estilo',
{
carregador: 'carregador css',
opções: {
módulos: {
auto: verdadeiro,
localIdentName: '[name]__[local]--[hash: base64:5]',
},
},
},
'sass-loader'
],
},
);
retornar configuração;
}
}
Depois disso, o Sass deve estar disponível no Storybook.
Aplique a propriedade não otimizada às imagens Next.js
Next.js tem muitos recursos de otimização. Uma delas é a otimização de imagem através do componente de imagem que faz com que as imagens carreguem mais rápido e se adaptem à tela. No entanto, é difícil trabalhar com o Storybook, pois o Storybook é executado isoladamente do ambiente Next.js. É melhor desotimizar as imagens nas histórias.
Para começar, você precisa servir o diretório público no Storybook para indicar onde as imagens estão localizadas. Você pode fazê-lo no scripts npm mapa no pacote.json arquivo ou em .storybook/main.js.
Em pacote.json, atualize os scripts do Storybook para atender ao diretório público.
"scripts": {
"livro de histórias": "start-storybook -p 6006 -s ./public",
"construir-livro de histórias": "build-storybook -s public"
}
Como alternativa, modifique ./livro de histórias/main.js para incluir o diretório estático que, neste caso, é a pasta pública.
módulo.exporta = {
// outras configurações
"staticDirs": [ "../público" ],
}
Depois de servir o diretório público, aplique a propriedade não otimizada às imagens Next.js usadas nas histórias.
Em .storybook/main.js, adicione o seguinte código:
importar * como NextImage de "próximo/imagem";
const OriginalNextImage = NextImage.padrão;
Objeto.defineProperty (NextImage, "padrão", {
configurável: verdadeiro,
valor: (adereços) => (
<OriginalPróximaImagem
{...adereços}
não otimizado
/>
),
});
Esse código usa o suporte não otimizado em qualquer lugar em que o componente de imagem é usado.
Usando o Storybook em Next.js
O livro de histórias é uma daquelas ferramentas que você acha muito tediosas de usar, mas quando começa a usá-las, percebe o que estava perdendo. Com o Storybook, você pode criar e testar diferentes componentes sem executar todo o aplicativo. Portanto, simplifica a construção de componentes desde o início.
Se você estiver usando o Next.js, certifique-se de configurar o CSS e desotimizar as imagens antes de começar.