nextjs server

Storybook NextJS Server

O Storybook NextJS Server é uma estrutura altamente experimental para criar componentes do React isoladamente. Ao contrário do Stable @storybook/nextjs , ele é incorporado ao seu aplicativo NextJS e renderizado pelos NextJs.

Isso tem alguns benefícios importantes:

1. Você só precisa iniciar um servidor quando estiver desenvolvendo seu aplicativo
2. É "leve", pois seu aplicativo está fazendo a maior parte do levantamento pesado
3. Seus componentes renderizam de forma idêntica à forma como eles renderizam em seu aplicativo
4. Você pode usá -lo para desenvolver componentes do servidor React

• Instalar
• Começar
• Desenvolver
  • Diretório de páginas
  • Diretório de aplicativos
• Personalizar

Instalar

Para instalar, execute o seguinte em um projeto NextJS existente:

npm create nextjs-storybook

Em seguida, atualize seu next.config.js para usar o decorador withStorybook .

 + const withStorybook = require('@storybook/nextjs-server/next-config')(/* sb config */);

/** @type {import('next').NextConfig} */
- module.exports = {/* nextjs config */}
+ module.exports = withStorybook({/* nextjs config */}); 

Começar

O instalador adiciona amostra de histórias ao diretório /src/stories ou /stories . Para visualizar seu livro de histórias, basta executar seu próximo servidor de dev:

npm run dev

Seu aplicativo deve ser exibido normalmente, mas deve obter uma nova rota /storybook , que exibe suas histórias.

Ele pode falhar se o seu próximo servidor de dev do próximojs não estiver em execução na porta padrão, que é 3000 ou a variável de ambiente $PORT se definido. Se a porta especificada já estiver tomada, o NextJS será incrementado automaticamente para encontrar uma porta gratuita e isso atrapalha o livro de histórias na configuração atual. Você pode personalizar sua configuração para diferentes portas, rotas, etc., conforme necessário.

Desenvolver

O desenvolvimento do livro de histórias está documentado nos documentos oficiais, mas há algumas nuances a serem cientes no servidor do livro de histórias NextJS. O comportamento é diferente, dependendo de você estar executando na configuração pages do NextJS (antigo) ou no diretório app .

Se o seu aplicativo estiver em execução no diretório pages , as histórias do livro de histórias serão implementadas como componentes do cliente React e devem se comportar de maneira muito semelhante ao livro de histórias estável para o NextJS.

Se o seu aplicativo estiver em execução no diretório app , as histórias do Storybook estão sendo executadas como componentes do React Server (RSC), estarão sujeitos a várias restrições do RSC.

Diretório de páginas

FixMe

Diretório de aplicativos

FixMe

Personalizar

A função withStorybook aceita várias opções de configuração, todas opcionais:

Opção	Descrição	Padrão
porta	Porta que o aplicativo Next.js será executado.	process.env.port ?? 3000
sbport	Porta interna esse livro de histórias será executado.	34567
Gerenciador	UI do caminho da UI do "gerente" do livro de histórias.	'livro de histórias'
VisuewPath	URL Path to StoryBook Story Visualize iframe.	'Storybook-preview'
configdir	Diretório onde estão os arquivos de configuração do livro de histórias.	'.
Appdir	Se deve usar o diretório de aplicativos NextJS.	indefinido