diff --git a/examples/next/components/Header.tsx b/examples/next/components/Header.tsx
index 7806c13a9..77fcc0bd8 100644
--- a/examples/next/components/Header.tsx
+++ b/examples/next/components/Header.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
import { Button, useColorMode } from 'theme-ui'
const Header = () => {
diff --git a/examples/next/components/about.mdx b/examples/next/components/about.mdx
new file mode 100644
index 000000000..58292c175
--- /dev/null
+++ b/examples/next/components/about.mdx
@@ -0,0 +1,12 @@
+import { Switch } from 'theme-ui'
+
+# Hello!
+
+This example site uses [Theme UI][] with [Next.js][]. This content is written in
+[MDX][].
+
+[next.js]: https://github.com/vercel/next.js
+[theme ui]: https://theme-ui.com
+[mdx]: https://mdxjs.com
+
+
diff --git a/examples/next/lib/mdx.d.ts b/examples/next/lib/mdx.d.ts
new file mode 100644
index 000000000..224c4d667
--- /dev/null
+++ b/examples/next/lib/mdx.d.ts
@@ -0,0 +1,4 @@
+declare module '*.mdx' {
+ let MDXComponent: (props: any) => JSX.Element
+ export default MDXComponent
+}
diff --git a/examples/next/src/theme.ts b/examples/next/lib/theme.ts
similarity index 95%
rename from examples/next/src/theme.ts
rename to examples/next/lib/theme.ts
index 621ac4b3f..459f45a88 100644
--- a/examples/next/src/theme.ts
+++ b/examples/next/lib/theme.ts
@@ -24,6 +24,7 @@ export const theme = makeTheme({
body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
heading: 'sans-serif',
},
+ radii: [0, 4],
styles: {
root: {
@@ -34,6 +35,7 @@ export const theme = makeTheme({
},
a: {
color: 'primary',
+ fontWeight: 'bold',
textDecoration: 'none',
':hover': {
color: 'secondary',
diff --git a/examples/next/next-env.d.ts b/examples/next/next-env.d.ts
index 9bc3dd46b..4f11a03dc 100644
--- a/examples/next/next-env.d.ts
+++ b/examples/next/next-env.d.ts
@@ -1,5 +1,4 @@
///
-///
///
// NOTE: This file should not be edited
diff --git a/examples/next/next.config.js b/examples/next/next.config.js
index 11294a037..e6f539a5d 100644
--- a/examples/next/next.config.js
+++ b/examples/next/next.config.js
@@ -3,7 +3,7 @@ const path = require('path')
const withMDX = require('@next/mdx')()
module.exports = withMDX({
- pageExtensions: ['js', 'mdx'],
+ pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
webpack(config) {
// This is just for the sake of example app.
// yarn link doesn't play well with React hooks.
diff --git a/examples/next/package.json b/examples/next/package.json
index eddfd5a2d..372c5d739 100644
--- a/examples/next/package.json
+++ b/examples/next/package.json
@@ -12,11 +12,18 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
+ "@emotion/react": "^11.7.1",
+ "@emotion/styled": "^11.6.0",
"@mdx-js/loader": "^1.6.22",
- "@next/mdx": "^11.1.2",
- "next": "^11.1.3",
+ "@mdx-js/react": "^1.6.22",
+ "@next/mdx": "^12.0.7",
+ "next": "^12.0.7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"theme-ui": "latest"
+ },
+ "devDependencies": {
+ "@types/react": "^17.0.38",
+ "typescript": "^4.5.4"
}
}
diff --git a/examples/next/pages/_app.js b/examples/next/pages/_app.js
deleted file mode 100644
index 63ea3d347..000000000
--- a/examples/next/pages/_app.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-import { ThemeProvider } from 'theme-ui'
-
-import Header from '../components/Header'
-import { theme } from '../src/theme'
-
-/**
- * @see https://nextjs.org/docs/advanced-features/custom-app
- * @see https://nextjs.org/docs/basic-features/typescript#custom-app
- * @param props {import("next/app").AppProps}
- */
-export default function MyApp({ Component, pageProps }) {
- return (
-
-
-
-
- )
-}
diff --git a/examples/next/pages/_app.tsx b/examples/next/pages/_app.tsx
new file mode 100644
index 000000000..59317d512
--- /dev/null
+++ b/examples/next/pages/_app.tsx
@@ -0,0 +1,30 @@
+/** @jsxImportSource theme-ui */
+import { ThemeProvider } from 'theme-ui'
+
+import Header from '../components/header'
+import { theme } from '../lib/theme'
+import type { AppProps } from 'next/app'
+
+/**
+ * @see https://nextjs.org/docs/advanced-features/custom-app
+ * @see https://nextjs.org/docs/basic-features/typescript#custom-app
+ */
+export default function MyApp({ Component, pageProps }: AppProps) {
+ return (
+
+
+
+
+
+
+ )
+}
diff --git a/examples/next/pages/_document.js b/examples/next/pages/_document.js
deleted file mode 100644
index 220e99496..000000000
--- a/examples/next/pages/_document.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource theme-ui */
-import Document, { Html, Head, Main, NextScript } from 'next/document'
-import { InitializeColorMode } from 'theme-ui'
-
-export default class MyDocument extends Document {
- static async getInitialProps(ctx) {
- const initialProps = await Document.getInitialProps(ctx)
- return { ...initialProps }
- }
-
- render() {
- return (
-
-
-