system-ui · hasparus · Jan 10, 2022 · Jan 8, 2022
@@ -1,4 +1,3 @@
-import React from 'react'
 import { Button, useColorMode } from 'theme-ui'
 
 const Header = () => {

@@ -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
+
+<Switch label="@theme-ui/components work seamlessly" />
@@ -0,0 +1,4 @@
+declare module '*.mdx' {
+  let MDXComponent: (props: any) => JSX.Element
+  export default MDXComponent
+}
@@ -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',

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

@@ -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.

@@ -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"
   }
 }
@@ -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 (
+    <ThemeProvider theme={theme}>
+      <main
+        sx={{
+          border: '1px solid',
+          borderColor: 'text',
+          padding: 3,
+          borderRadius: 1,
+          maxWidth: 768,
+          mx: 'auto',
+        }}
+      >
+        <Header />
+        <Component {...pageProps} />
+      </main>
+    </ThemeProvider>
+  )
+}
@@ -0,0 +1,15 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+import { InitializeColorMode } from 'theme-ui'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head />
+      <body>
+        <InitializeColorMode />
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
@@ -0,0 +1,13 @@
+import Head from 'next/head'
+import About from '../components/about.mdx'
+
+export default function Page() {
+  return (
+    <>
+      <Head>
+        <title>Next.js Theme UI</title>
+      </Head>
+      <About />
+    </>
+  )
+}
@@ -12,8 +12,9 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", ".next", "out"],
+  "include": ["**/*.ts", "**/*.tsx", "**/*.mdx", "lib/*.d.ts", "next-env.d.ts"]
 }