From 59e18b048798f6438e3d510b178597bc47bdd551 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Tue, 29 Nov 2022 16:12:15 +0100 Subject: [PATCH] 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 --- .changeset/curvy-yaks-protect.md | 7 + docs/next.config.mjs | 3 +- docs/package.json | 17 +- docs/pages/docs/docs-theme/start.mdx | 18 +- .../docs/docs-theme/theme-configuration.mdx | 2 +- docs/pages/docs/guide/image.mdx | 6 +- docs/pages/docs/guide/markdown.mdx | 2 - docs/pages/docs/guide/organize-files.mdx | 2 +- docs/pages/docs/index.mdx | 4 +- docs/pages/index.mdx | 6 +- docs/pnpm-lock.yaml | 576 +++--- docs/pnpm-workspace.yaml | 2 +- docs/theme.config.tsx | 35 +- docs/vercel.json | 3 + docs/yarn.lock | 1810 ----------------- examples/blog/package.json | 2 +- examples/docs/package.json | 2 +- examples/swr-site/next.config.js | 3 - examples/swr-site/package.json | 2 +- package.json | 6 +- packages/nextra-theme-blog/package.json | 6 +- packages/nextra-theme-blog/src/mdx-theme.tsx | 2 +- packages/nextra-theme-blog/src/meta.tsx | 4 +- packages/nextra-theme-blog/src/nav.tsx | 4 +- .../nextra-theme-blog/src/posts-layout.tsx | 4 +- packages/nextra-theme-docs/package.json | 6 +- .../src/components/anchor.tsx | 5 +- packages/nextra/package.json | 2 +- packages/nextra/src/file-system.ts | 10 + packages/nextra/src/loader.ts | 4 +- packages/nextra/src/locales.ts | 23 +- packages/nextra/src/plugin.ts | 5 +- pnpm-lock.yaml | 266 +-- 33 files changed, 527 insertions(+), 2322 deletions(-) create mode 100644 .changeset/curvy-yaks-protect.md create mode 100644 docs/vercel.json delete mode 100644 docs/yarn.lock diff --git a/.changeset/curvy-yaks-protect.md b/.changeset/curvy-yaks-protect.md new file mode 100644 index 0000000000..b5686d05dd --- /dev/null +++ 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 index 3739ba18f6..4c2071fb4f 100644 --- 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 index 418a144068..1c5d2e898a 100644 --- 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 index 1285b9e9da..2ca621da1d 100644 --- a/docs/pages/docs/docs-theme/start.mdx +++ b/docs/pages/docs/docs-theme/start.mdx @@ -56,17 +56,17 @@ To create a Nextra Docs site manually, you have to install **Next.js**, **React* - ```bash copy + ```bash pnpm i next react react-dom nextra nextra-theme-docs ``` - ```bash copy + ```bash npm i next react react-dom nextra nextra-theme-docs ``` - ```bash copy + ```bash yarn add next react react-dom nextra nextra-theme-docs ``` @@ -74,7 +74,7 @@ To create a Nextra Docs site manually, you have to install **Next.js**, **React* 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: My Nextra Documentation, // ... @@ -133,7 +133,7 @@ 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! @@ -141,8 +141,8 @@ Hello, world! And run the `dev` command to start developing the project: -```bash copy +```bash pnpm dev ``` - \ No newline at end of file + diff --git a/docs/pages/docs/docs-theme/theme-configuration.mdx b/docs/pages/docs/docs-theme/theme-configuration.mdx index c6f44a9e4c..1e5f97877d 100644 --- 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
diff --git a/docs/pages/docs/guide/image.mdx b/docs/pages/docs/guide/image.mdx index c801d5bb8e..e677f8d5bb 100644 --- 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 index 8feb28b418..268cff5dfd 100644 --- 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 index 84553ceab8..236d2ebf85 100644 --- 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
- ![](../../../public/assets/routing@1x.png) + ![](/assets/routing@1x.png) 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 index c7e99f90a0..e193b1bd0f 100644 --- 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) - <>![](../../public/assets/blog-theme.png) + <>![](/assets/blog-theme.png)

Make beautiful websites
with Next.js & MDX.

Simple, powerful and flexible site generation framework
with everything you love from Next.js.

-

Start →

+

Start →