diff --git a/examples/app-dir-mdx/.gitignore b/examples/app-dir-mdx/.gitignore new file mode 100644 index 0000000000000..c87c9b392c020 --- /dev/null +++ b/examples/app-dir-mdx/.gitignore @@ -0,0 +1,36 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/examples/app-dir-mdx/README.md b/examples/app-dir-mdx/README.md new file mode 100644 index 0000000000000..bb30f88bc869e --- /dev/null +++ b/examples/app-dir-mdx/README.md @@ -0,0 +1,36 @@ +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. + +The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. + +This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/examples/app-dir-mdx/app/globals.css b/examples/app-dir-mdx/app/globals.css new file mode 100644 index 0000000000000..d4f491e152dd0 --- /dev/null +++ b/examples/app-dir-mdx/app/globals.css @@ -0,0 +1,107 @@ +:root { + --max-width: 1100px; + --border-radius: 12px; + --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', + 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', + 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace; + + --foreground-rgb: 0, 0, 0; + --background-start-rgb: 214, 219, 220; + --background-end-rgb: 255, 255, 255; + + --primary-glow: conic-gradient( + from 180deg at 50% 50%, + #16abff33 0deg, + #0885ff33 55deg, + #54d6ff33 120deg, + #0071ff33 160deg, + transparent 360deg + ); + --secondary-glow: radial-gradient( + rgba(255, 255, 255, 1), + rgba(255, 255, 255, 0) + ); + + --tile-start-rgb: 239, 245, 249; + --tile-end-rgb: 228, 232, 233; + --tile-border: conic-gradient( + #00000080, + #00000040, + #00000030, + #00000020, + #00000010, + #00000010, + #00000080 + ); + + --callout-rgb: 238, 240, 241; + --callout-border-rgb: 172, 175, 176; + --card-rgb: 180, 185, 188; + --card-border-rgb: 131, 134, 135; +} + +@media (prefers-color-scheme: dark) { + :root { + --foreground-rgb: 255, 255, 255; + --background-start-rgb: 0, 0, 0; + --background-end-rgb: 0, 0, 0; + + --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0)); + --secondary-glow: linear-gradient( + to bottom right, + rgba(1, 65, 255, 0), + rgba(1, 65, 255, 0), + rgba(1, 65, 255, 0.3) + ); + + --tile-start-rgb: 2, 13, 46; + --tile-end-rgb: 2, 5, 19; + --tile-border: conic-gradient( + #ffffff80, + #ffffff40, + #ffffff30, + #ffffff20, + #ffffff10, + #ffffff10, + #ffffff80 + ); + + --callout-rgb: 20, 20, 20; + --callout-border-rgb: 108, 108, 108; + --card-rgb: 100, 100, 100; + --card-border-rgb: 200, 200, 200; + } +} + +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +html, +body { + max-width: 100vw; + overflow-x: hidden; +} + +body { + color: rgb(var(--foreground-rgb)); + background: linear-gradient( + to bottom, + transparent, + rgb(var(--background-end-rgb)) + ) + rgb(var(--background-start-rgb)); +} + +a { + color: inherit; + text-decoration: none; +} + +@media (prefers-color-scheme: dark) { + html { + color-scheme: dark; + } +} diff --git a/examples/app-dir-mdx/app/head.tsx b/examples/app-dir-mdx/app/head.tsx new file mode 100644 index 0000000000000..5ad797f1f2191 --- /dev/null +++ b/examples/app-dir-mdx/app/head.tsx @@ -0,0 +1,10 @@ +export default function Head() { + return ( + <> + Create Next App + + + + + ) +} diff --git a/examples/app-dir-mdx/app/layout.tsx b/examples/app-dir-mdx/app/layout.tsx new file mode 100644 index 0000000000000..245bd756ae580 --- /dev/null +++ b/examples/app-dir-mdx/app/layout.tsx @@ -0,0 +1,18 @@ +import './globals.css' + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + {/* + will contain the components returned by the nearest parent + head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head + */} + + {children} + + ) +} diff --git a/examples/app-dir-mdx/app/message.mdx b/examples/app-dir-mdx/app/message.mdx new file mode 100644 index 0000000000000..7e1240e38d947 --- /dev/null +++ b/examples/app-dir-mdx/app/message.mdx @@ -0,0 +1,3 @@ +# MDX as a Server Component + +This is a demo for rendering MDX as a server component. diff --git a/examples/app-dir-mdx/app/page.module.css b/examples/app-dir-mdx/app/page.module.css new file mode 100644 index 0000000000000..4732b55fdc237 --- /dev/null +++ b/examples/app-dir-mdx/app/page.module.css @@ -0,0 +1,271 @@ +.main { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + padding: 6rem; + min-height: 100vh; +} + +.description { + display: inherit; + justify-content: inherit; + align-items: inherit; + font-size: 0.85rem; + max-width: var(--max-width); + width: 100%; + z-index: 2; + font-family: var(--font-mono); +} + +.description a { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.description p { + position: relative; + margin: 0; + padding: 1rem; + background-color: rgba(var(--callout-rgb), 0.5); + border: 1px solid rgba(var(--callout-border-rgb), 0.3); + border-radius: var(--border-radius); +} + +.code { + font-weight: 700; + font-family: var(--font-mono); +} + +.grid { + display: grid; + grid-template-columns: repeat(3, minmax(33%, auto)); + width: var(--max-width); + max-width: 100%; +} + +.card { + padding: 1rem 1.2rem; + border-radius: var(--border-radius); + background: rgba(var(--card-rgb), 0); + border: 1px solid rgba(var(--card-border-rgb), 0); + transition: background 200ms, border 200ms; +} + +.card span { + display: inline-block; + transition: transform 200ms; +} + +.card h2 { + font-weight: 600; + margin-bottom: 0.7rem; +} + +.card p { + margin: 0; + opacity: 0.6; + font-size: 0.9rem; + line-height: 1.5; + max-width: 34ch; +} + +.center { + display: flex; + justify-content: center; + align-items: center; + position: relative; + padding: 4rem 0; +} + +.center::before { + background: var(--secondary-glow); + border-radius: 50%; + width: 480px; + height: 360px; + margin-left: -400px; +} + +.center::after { + background: var(--primary-glow); + width: 240px; + height: 180px; + z-index: -1; +} + +.center::before, +.center::after { + content: ''; + left: 50%; + position: absolute; + filter: blur(45px); + transform: translateZ(0); +} + +.logo, +.thirteen { + position: relative; +} + +.thirteen { + display: flex; + justify-content: center; + align-items: center; + width: 75px; + height: 75px; + padding: 25px 10px; + margin-left: 16px; + transform: translateZ(0); + border-radius: var(--border-radius); + overflow: hidden; + box-shadow: 0px 2px 8px -1px #0000001a; +} + +.thirteen::before, +.thirteen::after { + content: ''; + position: absolute; + z-index: -1; +} + +/* Conic Gradient Animation */ +.thirteen::before { + animation: 6s rotate linear infinite; + width: 200%; + height: 200%; + background: var(--tile-border); +} + +/* Inner Square */ +.thirteen::after { + inset: 0; + padding: 1px; + border-radius: var(--border-radius); + background: linear-gradient( + to bottom right, + rgba(var(--tile-start-rgb), 1), + rgba(var(--tile-end-rgb), 1) + ); + background-clip: content-box; +} + +/* Enable hover only on non-touch devices */ +@media (hover: hover) and (pointer: fine) { + .card:hover { + background: rgba(var(--card-rgb), 0.1); + border: 1px solid rgba(var(--card-border-rgb), 0.15); + } + + .card:hover span { + transform: translateX(4px); + } +} + +@media (prefers-reduced-motion) { + .thirteen::before { + animation: none; + } + + .card:hover span { + transform: none; + } +} + +/* Mobile and Tablet */ +@media (max-width: 1023px) { + .content { + padding: 4rem; + } + + .grid { + grid-template-columns: 1fr; + margin-bottom: 120px; + max-width: 320px; + text-align: center; + } + + .card { + padding: 1rem 2.5rem; + } + + .card h2 { + margin-bottom: 0.5rem; + } + + .center { + padding: 8rem 0 6rem; + } + + .center::before { + transform: none; + height: 300px; + } + + .description { + font-size: 0.8rem; + } + + .description a { + padding: 1rem; + } + + .description p, + .description div { + display: flex; + justify-content: center; + position: fixed; + width: 100%; + } + + .description p { + align-items: center; + inset: 0 0 auto; + padding: 2rem 1rem 1.4rem; + border-radius: 0; + border: none; + border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); + background: linear-gradient( + to bottom, + rgba(var(--background-start-rgb), 1), + rgba(var(--callout-rgb), 0.5) + ); + background-clip: padding-box; + backdrop-filter: blur(24px); + } + + .description div { + align-items: flex-end; + pointer-events: none; + inset: auto 0 0; + padding: 2rem; + height: 200px; + background: linear-gradient( + to bottom, + transparent 0%, + rgb(var(--background-end-rgb)) 40% + ); + z-index: 1; + } +} + +@media (prefers-color-scheme: dark) { + .vercelLogo { + filter: invert(1); + } + + .logo, + .thirteen img { + filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70); + } +} + +@keyframes rotate { + from { + transform: rotate(360deg); + } + to { + transform: rotate(0deg); + } +} diff --git a/examples/app-dir-mdx/app/page.tsx b/examples/app-dir-mdx/app/page.tsx new file mode 100644 index 0000000000000..85b399dc61229 --- /dev/null +++ b/examples/app-dir-mdx/app/page.tsx @@ -0,0 +1,82 @@ +import Image from 'next/image' +import { Inter } from '@next/font/google' +import styles from './page.module.css' +import Content from './message.mdx' + +const inter = Inter({ subsets: ['latin'] }) + +export default function Home() { + return ( +
+
+

+ Get started by editing  + app/page.tsx +

+
+ + By{' '} + Vercel Logo + +
+
+ +
+
+ +
+
+ +
+ +

+ Docs -> +

+

Find in-depth information about Next.js features and API.

+ + + +

+ Templates -> +

+

Explore the Next.js 13 playground.

+ + + +

+ Deploy -> +

+

+ Instantly deploy your Next.js site to a shareable URL with Vercel. +

+ +
+
+ ) +} diff --git a/examples/app-dir-mdx/mdx-components.tsx b/examples/app-dir-mdx/mdx-components.tsx new file mode 100644 index 0000000000000..b980a0bcd8348 --- /dev/null +++ b/examples/app-dir-mdx/mdx-components.tsx @@ -0,0 +1,10 @@ +// This file is required to use MDX in `app` directory. +export function useMDXComponents(components: { + [component: string]: React.ComponentType +}) { + return { + // Allows customizing built-in components, e.g. to add styling. + // h1: ({ children }) =>

{children}

, + ...components, + } +} diff --git a/examples/app-dir-mdx/next.config.js b/examples/app-dir-mdx/next.config.js new file mode 100644 index 0000000000000..830d1d4192f91 --- /dev/null +++ b/examples/app-dir-mdx/next.config.js @@ -0,0 +1,10 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + experimental: { + appDir: true, + mdxRs: true, + }, +} + +const withMDX = require('@next/mdx')() +module.exports = withMDX(nextConfig) diff --git a/examples/app-dir-mdx/package.json b/examples/app-dir-mdx/package.json new file mode 100644 index 0000000000000..a6677ccda1f6d --- /dev/null +++ b/examples/app-dir-mdx/package.json @@ -0,0 +1,23 @@ +{ + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "@mdx-js/react": "^2.2.1", + "@next/font": "13.1.1", + "@next/mdx": "^13.1.1", + "@types/node": "18.11.18", + "@types/react": "18.0.26", + "@types/react-dom": "18.0.10", + "eslint": "8.31.0", + "eslint-config-next": "13.1.1", + "next": "13.1.1", + "react": "18.2.0", + "react-dom": "18.2.0", + "typescript": "4.9.4" + } +} diff --git a/examples/app-dir-mdx/public/favicon.ico b/examples/app-dir-mdx/public/favicon.ico new file mode 100644 index 0000000000000..718d6fea4835e Binary files /dev/null and b/examples/app-dir-mdx/public/favicon.ico differ diff --git a/examples/app-dir-mdx/public/next.svg b/examples/app-dir-mdx/public/next.svg new file mode 100644 index 0000000000000..5174b28c565c2 --- /dev/null +++ b/examples/app-dir-mdx/public/next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/app-dir-mdx/public/vercel.svg b/examples/app-dir-mdx/public/vercel.svg new file mode 100644 index 0000000000000..d2f84222734f2 --- /dev/null +++ b/examples/app-dir-mdx/public/vercel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/app-dir-mdx/tsconfig.json b/examples/app-dir-mdx/tsconfig.json new file mode 100644 index 0000000000000..6ef5cd577f6ed --- /dev/null +++ b/examples/app-dir-mdx/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ] + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +} diff --git a/examples/app-dir-mdx/types/mdx.d.ts b/examples/app-dir-mdx/types/mdx.d.ts new file mode 100644 index 0000000000000..a9831edba2ed2 --- /dev/null +++ b/examples/app-dir-mdx/types/mdx.d.ts @@ -0,0 +1,5 @@ +// types/mdx.d.ts +declare module '*.mdx' { + let MDXComponent: (props) => JSX.Element + export default MDXComponent +} diff --git a/packages/next-mdx/index.js b/packages/next-mdx/index.js index ec20c82b4ef8f..d054b7703ddc3 100644 --- a/packages/next-mdx/index.js +++ b/packages/next-mdx/index.js @@ -7,20 +7,24 @@ module.exports = ? { loader: require.resolve('./mdx-rs-loader'), options: { - providerImportSource: '@mdx-js/react', + providerImportSource: 'next-mdx-import-source-file', ...pluginOptions.options, }, } : { loader: require.resolve('@mdx-js/loader'), options: { - providerImportSource: '@mdx-js/react', + providerImportSource: 'next-mdx-import-source-file', ...pluginOptions.options, }, } return Object.assign({}, nextConfig, { webpack(config, options) { + config.resolve.alias['next-mdx-import-source-file'] = [ + 'private-next-root-dir/mdx-components', + '@mdx-js/react', + ] config.module.rules.push({ test: extension, use: [