From 12863ac1c6d1b1bc9b7196b115290a65a8eb938c Mon Sep 17 00:00:00 2001
From: Robert Koch <robert@kochie.io>
Date: Sun, 30 Apr 2023 10:49:21 +1000
Subject: [PATCH 1/4] Update README.md

---
 README.md | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/README.md b/README.md
index 6a38fc8..32c2684 100644
--- a/README.md
+++ b/README.md
@@ -135,6 +135,64 @@ await import("prismjs/components/prism-applescript")
 /** or **/
 require("prismjs/components/prism-applescript")
 ```
+#### Next.js
+
+To enable custom languages that can be loaded with client components use the following pattern
+
+```tsx
+'use client'
+
+import React, { use } from 'react'
+import { Highlight, themes } from 'prism-react-renderer'
+
+const ExtraLanguages = Promise.all([
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  import('prismjs/components/prism-python'),
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  import('prismjs/components/prism-julia'),
+])
+
+const CodeBlock({code, language}) {
+  use(ExtraLanguages)
+  
+  return <Highlight
+    code={code}
+    language={langauge}
+  >
+    {({
+          className,
+          style,
+          tokens,
+          getLineProps,
+          getTokenProps,
+        }): ReactElement => ()
+  // Your Codeblock code
+}
+```
+
+Wrap in a `Suspense` layer for best results
+
+```tsx
+import { Prism } from 'prism-react-renderer'
+import CodeBlock, { CodeBlockProps } from './codeblock'
+import { PropsWithChildren, Suspense } from 'react'
+
+;(typeof global !== 'undefined' ? global : window).Prism = Prism
+
+export default async function LoadWrapper(
+  props: PropsWithChildren<CodeBlockProps>
+) {
+  return (
+    <>
+       <Suspense fallback={<div>Loading languages</div>}>
+          <CodeBlock {...props} />
+       </Suspense>
+    </>
+  )
+}
+```
 
 
 ## Basic Props

From b21de168a23b89f69e7d89c11d5b9eb572dd8bb5 Mon Sep 17 00:00:00 2001
From: Robert Koch <robert@kochie.io>
Date: Sun, 30 Apr 2023 10:50:12 +1000
Subject: [PATCH 2/4] Update README.md

---
 README.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 32c2684..e353733 100644
--- a/README.md
+++ b/README.md
@@ -40,8 +40,9 @@ _(If you just want to use your Prism CSS-file themes, that's also no problem)_
 
 
 - [Installation](#installation)
-  - [Usage](#usage)
-  - [Custom Language Support](#custom-language-support)
+- [Usage](#usage)
+- [Custom Language Support](#custom-language-support)
+  - [Next.js](#Next.js)
 - [Basic Props](#basic-props)
   - [children](#children)
   - [language](#language)

From 26dedceddd99d4c7ad5d3ccbb9adf40466664c5a Mon Sep 17 00:00:00 2001
From: Robert Koch <robert@kochie.io>
Date: Sun, 30 Apr 2023 10:50:58 +1000
Subject: [PATCH 3/4] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index e353733..a4285b3 100644
--- a/README.md
+++ b/README.md
@@ -42,7 +42,7 @@ _(If you just want to use your Prism CSS-file themes, that's also no problem)_
 - [Installation](#installation)
 - [Usage](#usage)
 - [Custom Language Support](#custom-language-support)
-  - [Next.js](#Next.js)
+  - [Next.js](#next.js)
 - [Basic Props](#basic-props)
   - [children](#children)
   - [language](#language)

From 036b86f21945a4d24bb4d20a6dfebaeab1a0151c Mon Sep 17 00:00:00 2001
From: Robert Koch <robert@kochie.io>
Date: Sun, 30 Apr 2023 10:51:40 +1000
Subject: [PATCH 4/4] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a4285b3..18836e3 100644
--- a/README.md
+++ b/README.md
@@ -42,7 +42,7 @@ _(If you just want to use your Prism CSS-file themes, that's also no problem)_
 - [Installation](#installation)
 - [Usage](#usage)
 - [Custom Language Support](#custom-language-support)
-  - [Next.js](#next.js)
+  - [Next.js](#nextjs)
 - [Basic Props](#basic-props)
   - [children](#children)
   - [language](#language)