diff --git a/package.json b/package.json index 3deaa3d..1cb905b 100644 --- a/package.json +++ b/package.json @@ -6,20 +6,21 @@ "dev": "next dev", "build": "next build", "start": "next start", - "lint": "next lint", - "lint:fix": "next lint --fix", + "lint": "eslint .", + "lint:fix": "eslint . --fix", "format": "prettier --cache --write .", "type-check": "tsc --noEmit", "style-check": "prettier . --check", "setup-checkers": "husky" }, "dependencies": { + "@emotion/cache": "^11.11.0", "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", - "@next/third-parties": "^14.2.4", + "@next/third-parties": "^16.1.6", "date-fns": "^3.2.0", "lodash": "^4.17.23", - "next": "^14.2.35", + "next": "^16.1.5", "react": "^18", "react-dom": "^18", "react-icons": "^5.0.1", diff --git a/src/app/EmotionRegistry.tsx b/src/app/EmotionRegistry.tsx new file mode 100644 index 0000000..4086f01 --- /dev/null +++ b/src/app/EmotionRegistry.tsx @@ -0,0 +1,34 @@ +'use client' + +import React, { useState } from 'react' +import { CacheProvider } from '@emotion/react' +import createCache from '@emotion/cache' +import { useServerInsertedHTML } from 'next/navigation' + +type Props = { + children: React.ReactNode +} + +export default function EmotionRegistry({ children }: Props) { + const [cache] = useState(() => { + const cache = createCache({ key: 'css', prepend: true }) + cache.compat = true + return cache + }) + + useServerInsertedHTML(() => { + const entries = Object.entries(cache.inserted) + const names = entries.map(([name]) => name).join(' ') + let styles = '' + + for (const [, value] of entries) { + if (typeof value === 'string') { + styles += value + } + } + + return