diff --git a/docs/packages/next.md b/docs/packages/next.md
index 22de328f..7ccd7450 100644
--- a/docs/packages/next.md
+++ b/docs/packages/next.md
@@ -13,19 +13,30 @@ Serverless Runtime is recommended.
 Since Server Components are server-only, you can use the bundled highlighter without worrying the bundle size.
 
 ```tsx
+import type { BundledLanguage } from 'shiki'
 import { codeToHtml } from 'shiki'
 
 export default function Page() {
   return (
     <main>
-      <CodeBlock />
+      <CodeBlock lang="ts">
+        {[
+          'console.log("Hello")',
+          'console.log("World")',
+        ].join('\n')}
+      </CodeBlock>
     </main>
   )
 }
 
-async function CodeBlock() {
-  const out = await codeToHtml('console.log("Hello World")', {
-    lang: 'ts',
+interface Props {
+  children: string
+  lang: BundledLanguage
+}
+
+async function CodeBlock(props: Props) {
+  const out = await codeToHtml(props.children, {
+    lang: props.lang,
     theme: 'github-dark'
   })
 
@@ -38,6 +49,7 @@ async function CodeBlock() {
 You can also call `codeToHast` to get the HTML abstract syntax tree, and render it using [`hast-util-to-jsx-runtime`](https://github.com/syntax-tree/hast-util-to-jsx-runtime). With this method, you can render your own `pre` and `code` components.
 
 ```tsx
+import type { BundledLanguage } from 'shiki'
 import { toJsxRuntime } from 'hast-util-to-jsx-runtime'
 import { Fragment } from 'react'
 import { jsx, jsxs } from 'react/jsx-runtime'
@@ -46,14 +58,24 @@ import { codeToHast } from 'shiki'
 export default function Page() {
   return (
     <main>
-      <CodeBlock />
+      <CodeBlock lang="ts">
+        {[
+          'console.log("Hello")',
+          'console.log("World")',
+        ].join('\n')}
+      </CodeBlock>
     </main>
   )
 }
 
-async function CodeBlock() {
-  const out = await codeToHast('console.log("Hello World")', {
-    lang: 'ts',
+interface Props {
+  children: string
+  lang: BundledLanguage
+}
+
+async function CodeBlock(props: Props) {
+  const out = await codeToHtml(props.children, {
+    lang: props.lang,
     theme: 'github-dark'
   })
 
@@ -77,14 +99,15 @@ We can start by creating a client `CodeBlock` component.
 Create a `shared.ts` for highlighter:
 
 ```ts
+import type { BundledLanguage } from 'shiki/bundle/web'
 import { toJsxRuntime } from 'hast-util-to-jsx-runtime'
 import { Fragment } from 'react'
 import { jsx, jsxs } from 'react/jsx-runtime'
 import { codeToHast } from 'shiki/bundle/web'
 
-export async function highlight(code: string) {
+export async function highlight(code: string, lang: BundledLanguage) {
   const out = await codeToHast(code, {
-    lang: 'ts',
+    lang,
     theme: 'github-dark'
   })
 
@@ -107,7 +130,7 @@ export function CodeBlock({ initial }: { initial?: JSX.Element }) {
   const [nodes, setNodes] = useState(initial)
 
   useLayoutEffect(() => {
-    void highlight('console.log("Rendered on client")').then(setNodes)
+    void highlight('console.log("Rendered on client")', 'ts').then(setNodes)
   }, [])
 
   return nodes ?? <p>Loading...</p>
@@ -126,7 +149,7 @@ export default async function Page() {
   // `initial` is optional.
   return (
     <main>
-      <CodeBlock initial={await highlight('console.log("Rendered on server")')} />
+      <CodeBlock initial={await highlight('console.log("Rendered on server")', 'ts')} />
     </main>
   )
 }