├── .gitignore ├── .prettierrc ├── README.md ├── components ├── CriticalCssHead │ ├── InlineStyle.tsx │ └── index.tsx └── Example │ ├── Example.module.css │ └── index.tsx ├── next-env.d.ts ├── package.json ├── pages ├── _app.tsx ├── _document.tsx └── index.tsx ├── postcss.config.js ├── styles └── global.css ├── tsconfig.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .next 3 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "always", 3 | "printWidth": 120, 4 | "proseWrap": "always", 5 | "singleQuote": true, 6 | "trailingComma": "all" 7 | } 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Next.js 9.3, TypeScript, tailwindcss, Critical CSS 2 | 3 | A [Next.js](https://nextjs.org/) 9.3 Starter Template with [TypeScript](https://www.typescriptlang.org/), 4 | [tailwindcss](https://tailwindcss.com/), and the [Critical CSS technique](https://web.dev/extract-critical-css/). 5 | 6 | ## Features 7 | 8 | ✅ Next.js 9.3.0
✅ tailwindcss 1.2.0
✅ Strict TypeScript 3.8.3
✅ Remove Unused CSS
✅ Inline Critical CSS in the ``
13 | 14 | ## Production HTML 15 | 16 | The vast majority of the CSS is [normalize.css](https://necolas.github.io/normalize.css/) from `@tailwind base;` in 17 | `/styles/global.css`. Most projects normalise CSS, but you do you. 18 | 19 | ```html 20 | 21 | 22 | 23 | 24 | 25 | 26 | 337 | 343 | 344 | 345 | 346 | 347 | 352 | 353 | 354 | 355 |
356 |
357 |

Hello Next.js 9.3

358 |

With TypeScript, tailwindcss, and Critical CSS

359 |
360 |
361 | 372 | 373 | 374 | 375 | 376 | 377 | 381 | 382 | 383 | 384 | 385 | 386 | ``` 387 | -------------------------------------------------------------------------------- /components/CriticalCssHead/InlineStyle.tsx: -------------------------------------------------------------------------------- 1 | import { readFileSync } from 'fs'; 2 | import { join } from 'path'; 3 | 4 | export interface Props { 5 | assetPrefix?: string; 6 | file: string; 7 | nonce?: string; 8 | } 9 | 10 | export const InlineStyle: React.FC = ({ assetPrefix, file, nonce }) => { 11 | const cssPath = join(process.cwd(), '.next', file); 12 | const cssSource = readFileSync(cssPath, 'utf-8'); 13 | const html = { __html: cssSource }; 14 | const id = `${assetPrefix}/_next/${file}`; 15 | return