Permalink
    
      
  
      
    
      
          
          
            
            
              
            
            
                
                  
            
          
          
            
            
            
                
                  
                
                  
            
          
          
          
            
            
            
                
                  
            
          
          
          
          
            
            
              
            
            
                
                  
                
                  
                
                  
                
                  
            
          
          
            
              
                
              
            
            
            
                
                  
            
          
          
            
            
              
            
            
                
                  
                
                  
            
          
          
            
            
            
                
                  
            
          
          
          
            
            
            
                
                  
            
          
          
            
            
              
            
            
                
                  
                
                  
                
                  
                
                  
                
                  
                
                  
                
                  
                
                  
                
                  
                
                  
            
          
          
          
            
            
            
                
                  
            
          
          
          
            
            
            
                
                  
                
                  
                
                  
                
                  
                
                  
                
                  
            
          
          
          
            
            
            
                
                  
                
                  
            
          
          
            
              
                
              
            
            
            
                
                  
                
                  
                
                  
                
                  
            
          
          
            
            
            
                
                  
                
                  
                
                  
                
                  
                
                  
                
                
                  
            
          
          
            
            
            
                
                  
                
                  
            
          
          
          
            
            
            
                
                  
                
                  
                
                  
                
                  
            
          
          
          
            
            
            
                
                  
            
          
          
          
          
          
            
            
            
                
                  
            
          
          
            
            
            
                
                  
            
          
          
      
    
  
  
  material-ui/examples/nextjs/pages/_document.js
  
    
    
 
  Newer
  
  
        
          
        
        100644
        
          71 lines (65 sloc)
          
        1.86 KB
      
    2
                  import Document, { Head, Main, NextScript } from 'next/document';
                3
                  import { ServerStyleSheets } from '@material-ui/styles';
                4
                  import theme from '../src/theme';
                6
                  export default class MyDocument extends Document {
                10
                          <Head>
                11
                            <meta charSet="utf-8" />
                12
                            <meta
                13
                              name="viewport"
                14
                              content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
                15
                            />
                16
                            {/* PWA primary color */}
                17
                            <meta name="theme-color" content={theme.palette.primary.main} />
                20
                              href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
                21
                            />
                22
                          </Head>
                23
                          <body>
                24
                            <Main />
                25
                            <NextScript />
                26
                          </body>
                27
                        </html>
                28
                      );
                29
                    }
                30
                  }
                32
                  MyDocument.getInitialProps = async ctx => {
                36
                    // 1. app.getInitialProps
                37
                    // 2. page.getInitialProps
                38
                    // 3. document.getInitialProps
                39
                    // 4. app.render
                40
                    // 5. page.render
                41
                    // 6. document.render
                44
                    // 1. document.getInitialProps
                45
                    // 2. app.render
                46
                    // 3. page.render
                47
                    // 4. document.render
                48
                    //
                49
                    // On the client
                50
                    // 1. app.getInitialProps
                51
                    // 2. page.getInitialProps
                52
                    // 3. app.render
                53
                    // 4. page.render
                54
                  55
                    // Render app and page and get the context of the page with collected side effects.
                56
                    const sheets = new ServerStyleSheets();
                57
                    const originalRenderPage = ctx.renderPage;
                59
                    ctx.renderPage = () =>
                60
                      originalRenderPage({
                61
                        enhanceApp: App => props => sheets.collect(<App {...props} />),
                62
                      });
                64
                    const initialProps = await Document.getInitialProps(ctx);
                68
                      // Styles fragment is rendered after the app and page rendering finish.
                69
                      styles: [...initialProps.styles, sheets.getStyleElement()],