[Docs] Migrate with-react-jss to typescript (#40308)
## Documentation / Examples - [x] Make sure the linting passes by running `pnpm lint` - [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
This commit is contained in:
parent
62c7eff354
commit
aa5be3ff64
6 changed files with 34 additions and 13 deletions
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"presets": ["next/babel"]
|
||||
}
|
|
@ -7,8 +7,13 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"next": "latest",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-jss": "^10.3.0"
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-jss": "^10.9.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "18.7.15",
|
||||
"@types/react": "18.0.18",
|
||||
"typescript": "4.8.2"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
import type { AppProps } from 'next/app'
|
||||
import { useEffect } from 'react'
|
||||
|
||||
export default function App({ Component, pageProps }) {
|
||||
export default function App({ Component, pageProps }: AppProps) {
|
||||
useEffect(() => {
|
||||
const style = document.getElementById('server-side-styles')
|
||||
if (style) {
|
||||
if (style && style.parentNode) {
|
||||
style.parentNode.removeChild(style)
|
||||
}
|
||||
}, [])
|
|
@ -1,8 +1,8 @@
|
|||
import Document from 'next/document'
|
||||
import Document, { DocumentContext } from 'next/document'
|
||||
import { SheetsRegistry, JssProvider, createGenerateId } from 'react-jss'
|
||||
|
||||
export default class JssDocument extends Document {
|
||||
static async getInitialProps(ctx) {
|
||||
static async getInitialProps(ctx: DocumentContext) {
|
||||
const registry = new SheetsRegistry()
|
||||
const generateId = createGenerateId()
|
||||
const originalRenderPage = ctx.renderPage
|
|
@ -12,7 +12,7 @@ const useStyles = createUseStyles({
|
|||
},
|
||||
})
|
||||
|
||||
function Index() {
|
||||
export default function IndexPage() {
|
||||
const classes = useStyles()
|
||||
|
||||
return (
|
||||
|
@ -23,5 +23,3 @@ function Index() {
|
|||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Index
|
20
examples/with-react-jss/tsconfig.json
Normal file
20
examples/with-react-jss/tsconfig.json
Normal file
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"incremental": true,
|
||||
"esModuleInterop": true,
|
||||
"moduleResolution": "node",
|
||||
"module": "esnext",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve"
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
Loading…
Reference in a new issue