Também estou enfrentando esse problema quando uso módulos css, mas quando uso styled-jsx funciona bem.

Percebo um problema semelhante em que o css global em _app.js não parece ser carregado com o javascript desligado enquanto está no modo dev. Isso torna o SSR mais difícil de testar, pois podem faltar estilos.

@robgraeber , tenho exatamente o problema que você tem. O CSS está sendo compilado em _app.js em vez de um arquivo css separado.

O mesmo problema aqui.
Criei um exemplo mínimo reproduzindo esse problema: https://github.com/dnaranjo89/next-css-ssr

Além disso, às vezes edito alguns css globais no inspetor e qualquer alteração causa o dano de todo o css da página de alguma forma. Alguém já experimentou isso?

@derskeal uma solução alternativa é usar este plug-in sass e importar suas folhas de estilo via sass em seu componente Layout: https://github.com/giuseppeg/styled-jsx-plugin-sass

@Timer, eu poderia reproduzir este problema neste repo https://github.com/yanv1991/demo-react-dom , isso não é carregar os estilos usando módulos sass integrados com um componente carregado dinâmico para ssr no modo prod

Este projeto não pode ser executado:

error - Error [FirebaseError]: projectId must be a string in FirebaseApp.options
    at new FirestoreError (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:1223:28)
    at Function.Firestore.databaseIdFromApp (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:21018:19)
    at new Firestore (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:20850:42)
    at /Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:22871:66
    at Component.instanceFactory (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/firestore/dist/index.node.cjs.js:22410:16)
    at Provider.getOrInitializeService (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/component/dist/index.cjs.js:219:39)
    at Provider.getImmediate (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/component/dist/index.cjs.js:120:33)
    at FirebaseAppImpl._getService (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/app/dist/index.node.cjs.js:228:49)
    at FirebaseAppImpl.firebaseAppImpl.<computed> [as firestore] (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/app/dist/index.node.cjs.js:440:39)
    at Object.serviceNamespace [as firestore] (/Users/joe/Desktop/scratch2/covid-tutoring/node_modules/@firebase/app/dist/index.node.cjs.js:420:45)
    at eval (webpack-internal:///./src/firebase/db.tsx:19:124)
    at Module../src/firebase/db.tsx (/Users/joe/Desktop/scratch2/covid-tutoring/.next/server/static/development/pages/_app.js:128:1)
    at __webpack_require__ (/Users/joe/Desktop/scratch2/covid-tutoring/.next/server/static/development/pages/_app.js:23:31)
    at eval (webpack-internal:///./src/firebase/user.tsx:12:61)
    at Module../src/firebase/user.tsx (/Users/joe/Desktop/scratch2/covid-tutoring/.next/server/static/development/pages/_app.js:152:1)
    at __webpack_require__ (/Users/joe/Desktop/scratch2/covid-tutoring/.next/server/static/development/pages/_app.js:23:31) {
  code: 'invalid-argument',
  toString: [Function]
}

Isso deve ser corrigido em next@^9.4.5-canary.15 ! Por favor, atualize e nos informe.

Obrigado @Timer! 🎉 Eu testei e a correção funciona para mim.

Eu estava experimentando isso no modo de desenvolvimento e no modo de produção em um servidor personalizado (conversão incremental de páginas no site da empresa). ^9.4.5-canary.15 consertou para mim!

Oi pessoal. Foi verificado o problema com a versão canário, ele corrige o problema no modo de desenvolvimento, mas na produção ainda permanece. Alguém tem o mesmo problema?

Na versão de produção, está faltando o <style data-next-hide-fouc="true">body{display:none}</style> .

Oi pessoal. Foi verificado o problema com a versão canário, ele corrige o problema no modo de desenvolvimento, mas na produção ainda permanece. Alguém tem o mesmo problema?

Na versão de produção, está faltando o <style data-next-hide-fouc="true">body{display:none}</style> .

Mesmo aqui, esse é um problema diferente quando acontece no prod ou relacionado, alguém sabe?

Mesmo aqui, esse é um problema diferente quando acontece no prod ou relacionado, alguém sabe?

Para mim, esse problema estava ocorrendo apenas no modo de desenvolvimento, não no modo de produção. Portanto, suponho que o problema com o produto possa ter uma causa diferente.

Oi pessoal. Foi verificado o problema com a versão canário, ele corrige o problema no modo de desenvolvimento, mas na produção ainda permanece. Alguém tem o mesmo problema?

Na versão de produção, está faltando o <style data-next-hide-fouc="true">body{display:none}</style> .

Alguém conseguiu consertar isso na produção? O lançamento do Canary corrigiu nosso desenvolvimento de desenvolvimento, mas a produção ainda está interrompida.

então canário é a versão mais recente do próximo?

Sim, @jimmynames , canário é a versão mais recente do WIP (o termo se originou de mineiros que usaram pássaros canários para testar gases tóxicos ... A versão canário do Next.js poderia ser um esboço).

Esta correção está na versão estável do Next.js 9.5.0 e 9.5.1 ou mais recente (aplica-se apenas ao servidor de desenvolvimento)!

E quanto à produção? Ainda estou experimentando o FOUC com a interface de usuário StyledComponents + Material

Alguém encontrou alguma solução para isso?