Permalink
    
      
  
      
    
      
          
          
            
              
                
              
            
            
            
                
                  
            
          
          
            
              
                
              
            
            
            
                
                  
            
          
          
            
            
            
                
                  
            
          
          
          
            
            
            
                
                  
            
          
          
          
          
            
            
              
            
            
                
                  
                
                  
            
          
          
            
            
            
                
                  
            
          
          
          
            
            
            
                
                  
            
          
          
            
            
              
            
            
                
                  
                
                  
                
                  
                
                  
                
                  
                
                  
            
          
          
          
          
          
          
          
            
            
            
                
                  
                
                  
                
                  
                
                  
                
                  
                
                  
            
          
          
          
            
            
            
                
                  
                
                  
            
          
          
            
              
                
              
            
            
            
                
                  
                
                  
                
                  
                
                  
            
          
          
            
            
            
                
                  
                
                  
                
                  
                
                  
                
                  
                
                
                  
            
          
          
            
            
            
                
                  
                
                  
            
          
          
          
            
            
            
                
                  
                
                  
            
          
          
            
              
                
              
            
            
            
                
                  
            
          
          
          
          
            
            
            
                
                  
            
          
          
          
          
          
            
            
            
                
                  
            
          
          
            
            
            
                
                  
            
          
          
      
    
  
  
  material-ui/examples/nextjs/pages/_document.js
  
    
    
 
  Newer
  
  
        
          
        
        100644
        
          66 lines (60 sloc)
          
        1.72 KB
      
    2
                  import Document, { Html, Head, Main, NextScript } from 'next/document';
                3
                  import { ServerStyleSheets } from '@material-ui/core/styles';
                4
                  import theme from '../src/theme';
                6
                  export default class MyDocument extends Document {
                10
                          <Head>
                11
                            {/* PWA primary color */}
                12
                            <meta name="theme-color" content={theme.palette.primary.main} />
                15
                              href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
                16
                            />
                17
                          </Head>
                18
                          <body>
                19
                            <Main />
                20
                            <NextScript />
                21
                          </body>
                31
                    // 1. app.getInitialProps
                32
                    // 2. page.getInitialProps
                33
                    // 3. document.getInitialProps
                34
                    // 4. app.render
                35
                    // 5. page.render
                36
                    // 6. document.render
                39
                    // 1. document.getInitialProps
                40
                    // 2. app.render
                41
                    // 3. page.render
                42
                    // 4. document.render
                43
                    //
                44
                    // On the client
                45
                    // 1. app.getInitialProps
                46
                    // 2. page.getInitialProps
                47
                    // 3. app.render
                48
                    // 4. page.render
                49
                  50
                    // Render app and page and get the context of the page with collected side effects.
                51
                    const sheets = new ServerStyleSheets();
                52
                    const originalRenderPage = ctx.renderPage;
                54
                    ctx.renderPage = () =>
                55
                      originalRenderPage({
                56
                        enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
                59
                    const initialProps = await Document.getInitialProps(ctx);
                63
                      // Styles fragment is rendered after the app and page rendering finish.
                64
                      styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],