make nextra/nextra-theme-docs be compatible with next 13 (#946)

* make `nextra`/`nextra-theme-docs` be compatible with next 13 * fix docs * make project public * fix * fixes * Update curvy-yaks-protect.md Co-authored-by: Shu Ding <g@shud.in>
shuding · Nov 29, 2022 · 59e18b0 · 59e18b0
1 parent 2e2912e
commit 59e18b0
Show file tree

Hide file tree

Showing 33 changed files with 527 additions and 2,322 deletions.
diff --git a/.changeset/curvy-yaks-protect.md b/.changeset/curvy-yaks-protect.md
@@ -0,0 +1,7 @@
+---
+'nextra': patch
+'nextra-theme-docs': patch
+'nextra-theme-blog': patch
+---
+
+make `nextra`/`nextra-theme-docs`/`nextra-theme-blog` be compatible with next 13
diff --git a/docs/next.config.mjs b/docs/next.config.mjs
@@ -11,6 +11,5 @@ const withNextra = nextra({
 })
 
 export default withNextra({
-  reactStrictMode: true,
-  experimental: { images: { allowFutureImage: true } }
+  reactStrictMode: true
 })
diff --git a/docs/package.json b/docs/package.json
@@ -1,5 +1,6 @@
 {
   "name": "docs",
+  "private": true,
   "scripts": {
     "dev": "next",
     "start": "next start",
@@ -10,17 +11,17 @@
   "dependencies": {
     "clsx": "^1.2.1",
     "framer-motion": "^7.3.2",
-    "next": "^12.2.3",
-    "nextra": "2.0.0-beta.25",
-    "nextra-theme-docs": "2.0.0-beta.25",
+    "next": "^12.3.4",
+    "nextra": "^2.0.0-beta.42",
+    "nextra-theme-docs": "^2.0.0-beta.42",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^18.7.8",
-    "autoprefixer": "^10.4.8",
-    "postcss": "^8.4.16",
-    "tailwindcss": "^3.1.8",
-    "typescript": "^4.7.4"
+    "@types/node": "^18.11.9",
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.19",
+    "tailwindcss": "^3.2.4",
+    "typescript": "^4.9.3"
   }
 }
diff --git a/docs/pages/docs/docs-theme/start.mdx b/docs/pages/docs/docs-theme/start.mdx
@@ -56,25 +56,25 @@ To create a Nextra Docs site manually, you have to install **Next.js**, **React*
 
 <Tabs items={['pnpm', 'npm', 'yarn']}>
   <Tab>
-    ```bash copy
+    ```bash
     pnpm i next react react-dom nextra nextra-theme-docs
     ```
   </Tab>
   <Tab>
-    ```bash copy
+    ```bash
     npm i next react react-dom nextra nextra-theme-docs
     ```
   </Tab>
   <Tab>
-    ```bash copy
+    ```bash
     yarn add next react react-dom nextra nextra-theme-docs
     ```
   </Tab>
 </Tabs>
 
 Like any Next.js projects, you need to also add `scripts` to your `package.json`:
 
-```json filename="package.json" copy
+```json filename="package.json"
 {
   "scripts": {
     "dev": "next",
@@ -90,7 +90,7 @@ If you already have Next.js running, you only need to install `nextra` and `next
 
 Create the following `next.config.js` file in your project’s root directory:
 
-```js filename="next.config.js" copy
+```js filename="next.config.js"
 const withNextra = require('nextra')({
   theme: 'nextra-theme-docs',
   themeConfig: './theme.config.jsx',
@@ -116,7 +116,7 @@ import switchIcon from '@components/icons/switch'
 
 Lastly, create the corresponding `theme.config.jsx` file in your project’s root directory:
 
-```jsx filename="theme.config.jsx" copy
+```jsx filename="theme.config.jsx"
 export default {
   logo: <span>My Nextra Documentation</span>,
   // ...
@@ -133,16 +133,16 @@ More configuration options for the docs theme can be found here:
 
 Now, you can create an initial MDX page:
 
-```mdx filename="pages/index.mdx" copy
+```mdx filename="pages/index.mdx"
 # Welcome to Nextra
 
 Hello, world!
 ```
 
 And run the `dev` command to start developing the project:
 
-```bash copy
+```bash
 pnpm dev
 ```
 
-</div>
+</div>
diff --git a/docs/pages/docs/docs-theme/theme-configuration.mdx b/docs/pages/docs/docs-theme/theme-configuration.mdx
@@ -1,5 +1,5 @@
 import cn from 'clsx'
-import Image from 'next/future/image'
+import Image from 'next/image'
 
 export function Screenshot({ src, alt, full }) {
   return <div className={cn("mt-6 -mb-4 flex justify-center border dark:border-zinc-800 rounded-xl overflow-hidden", full ? 'bg-white' : 'bg-zinc-100')}>

diff --git a/docs/pages/docs/guide/image.mdx b/docs/pages/docs/guide/image.mdx
@@ -20,10 +20,10 @@ import { Callout } from 'nextra-theme-docs'
 Nextra supports automatically optimize your static image imports with the Markdown syntax. You no longer need to specify the width and height of the image manually,
 but directly use the `![]()` syntax to display the same image:
 
-```md filename="index.mdx" copy
-![Hello](../../../public/demo.png)
+```md filename="index.mdx"
+![Hello](/demo.png)
 ```
 
 With Next.js Image, there will be no layout shift, and a beautiful blury placeholder will be shown by default when loading the images:
 
-![Nextra](../../../public/og.png)
+![Nextra](/og.png)
diff --git a/docs/pages/docs/guide/markdown.mdx b/docs/pages/docs/guide/markdown.mdx
@@ -7,8 +7,6 @@ advanced Markdown format with React component support.
 
 For example, you can use import and use React components inside your Markdown files like this:
 
-import { Callout } from 'nextra-theme-docs'
-
 ```mdx filename="Markdown"
 ## Hello MDX
 

diff --git a/docs/pages/docs/guide/organize-files.mdx b/docs/pages/docs/guide/organize-files.mdx
@@ -5,7 +5,7 @@ Nextra first collects all your Markdown files and configurations from the `pages
 <br/>
 
 <figure>
-  ![](../../../public/assets/routing@1x.png)
+  ![](/assets/routing@1x.png)
   <figurecaption>
     Example: [Nextra Docs Theme](/docs/docs-theme) has sidebar and navbar
     generated automatically from Markdown files.

diff --git a/docs/pages/docs/index.mdx b/docs/pages/docs/index.mdx
@@ -14,14 +14,14 @@ To start using Nextra, you need to select a theme first:
     arrow
     title="Documentation theme"
     href="/docs/docs-theme/start">
-    <>![](../../public/assets/docs-theme.png)</>
+    <>![](/assets/docs-theme.png)</>
   </Card>
   <Card
     image
     arrow
     title="Blog theme"
     href="/docs-theme/installation">
-    <>![](../../public/assets/blog-theme.png)</>
+    <>![](/assets/blog-theme.png)</>
   </Card>
   <Card
     title="Start with empty theme"

diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx
@@ -51,7 +51,7 @@ export function I18n() {
   <div className="content-container">
     <h1 className="headline">Make beautiful websites <br/>with Next.js & MDX.</h1>
     <p className="subtitle">Simple, powerful and flexible site generation framework <br/>with everything you love from <a className="nextjs-link" href="https://nextjs.org" target="_blank">Next.js</a>.</p>
-    <p className="subtitle"><Link href="/docs"><a>Start →</a></Link></p>
+    <p className="subtitle"><Link href="/docs">Start →</Link></p>
   </div>
 
   <style jsx>{`
@@ -274,7 +274,7 @@ export function I18n() {
             <div style={{ fontSize: '.9rem', lineHeight: 2 }}>
               <span>{`[Learn more](/more)`}</span>
               <br/>
-              <span>{`![Hero](../public/hero.png)`}</span>
+              <span>{`![Hero](/hero.png)`}</span>
             </div>
           </div>
           <div className={styles.optimization}>
@@ -297,6 +297,6 @@ export function I18n() {
   </div>
 
   <div className="content-container" style={{ marginTop: '4rem', marginBottom: '4rem' }}>
-    <p className="subtitle"><Link href="/docs"><a>Documentation →</a></Link></p>
+    <p className="subtitle"><Link href="/docs">Documentation →</Link></p>
   </div>
 </div>