Commit 04f1928b97e35d5d5fe0cd9c216f1e431a121f33
improve css loading
romuloalves committed on 4/17/2021, 10:15:32 PMParent: 37c280147b9bc6348d2d1dcb7f850fd2b2330581
Files changed
| data/index.ts | changed |
| package-lock.json | changed |
| package.json | changed |
| pages/_document.tsx | changed |
| .babelrc | added |
| data/index.ts | ||
|---|---|---|
| @@ -35,11 +35,10 @@ | ||
| 35 | 35 … | href: 'https://nodejs.org/' |
| 36 | 36 … | }, |
| 37 | 37 … | { |
| 38 | 38 … | expression: 'go-lang', |
| 39 | - text: 'Go', | |
| 40 | - href: 'https://golang.org/', | |
| 41 | - title: 'Golang' | |
| 39 … | + text: 'Golang', | |
| 40 … | + href: 'https://golang.org/' | |
| 42 | 41 … | }, |
| 43 | 42 … | { |
| 44 | 43 … | expression: 'sql-server', |
| 45 | 44 … | text: 'SQL Server', |
| package-lock.json | ||
|---|---|---|
| The diff is too large to show. Use a local git client to view these changes. Old file size: 94414 bytes New file size: 108009 bytes |
| package.json | ||
|---|---|---|
| @@ -18,12 +18,15 @@ | ||
| 18 | 18 … | "next": "^10.1.3", |
| 19 | 19 … | "next-seo": "^4.24.0", |
| 20 | 20 … | "react": "^17.0.2", |
| 21 | 21 … | "react-dom": "^17.0.2", |
| 22 … | + "styled-components": "^5.2.3", | |
| 22 | 23 … | "styled-jsx": "^3.4.4" |
| 23 | 24 … | }, |
| 24 | 25 … | "devDependencies": { |
| 25 | 26 … | "@types/node": "^14.14.37", |
| 26 | 27 … | "@types/react": "^17.0.3", |
| 28 … | + "@types/styled-components": "^5.1.9", | |
| 29 … | + "babel-plugin-styled-components": "^1.12.0", | |
| 27 | 30 … | "typescript": "^4.2.4" |
| 28 | 31 … | } |
| 29 | 32 … | } |
| pages/_document.tsx | |||
|---|---|---|---|
| @@ -1,10 +1,33 @@ | |||
| 1 | 1 … | import Document, { Html, Head, Main, NextScript } from 'next/document'; | |
| 2 … | +import { ServerStyleSheet } from 'styled-components'; | ||
| 2 | 3 … | ||
| 3 | 4 … | class MyDocument extends Document { | |
| 4 | 5 … | static async getInitialProps(ctx) { | |
| 6 … | + const sheet = new ServerStyleSheet(); | ||
| 7 … | + const originalRenderPage = ctx.renderPage; | ||
| 5 | 8 … | const initialProps = await Document.getInitialProps(ctx); | |
| 6 | 9 … | ||
| 10 … | + try { | ||
| 11 … | + ctx.renderPage = () => | ||
| 12 … | + originalRenderPage({ | ||
| 13 … | + enhanceApp: App => props => sheet.collectStyles(<App {...props} />), | ||
| 14 … | + }) | ||
| 15 … | + | ||
| 16 … | + const initialProps = await Document.getInitialProps(ctx) | ||
| 17 … | + return { | ||
| 18 … | + ...initialProps, | ||
| 19 … | + styles: ( | ||
| 20 … | + <> | ||
| 21 … | + {initialProps.styles} | ||
| 22 … | + {sheet.getStyleElement()} | ||
| 23 … | + </> | ||
| 24 … | + ), | ||
| 25 … | + } | ||
| 26 … | + } finally { | ||
| 27 … | + sheet.seal() | ||
| 28 … | + } | ||
| 29 … | + | ||
| 7 | 30 … | return { | |
| 8 | 31 … | ...initialProps | |
| 9 | 32 … | }; | |
| 10 | 33 … | } | |
| @@ -22,5 +45,6 @@ | |||
| 22 | 45 … | ) | |
| 23 | 46 … | } | |
| 24 | 47 … | } | |
| 25 | 48 … | ||
| 26 | -export default MyDocument | ||
| 49 … | +export default MyDocument; | ||
| 50 … | + | ||
Built with git-ssb-web