feat: add nextjs plugin for llamaindex (#824)

.changeset/warm-papayas-wait.md

@@ -0,0 +1,10 @@
+---
+"llamaindex": patch
+"@llamaindex/core-e2e": patch
+"@llamaindex/next-agent-test": patch
+"@llamaindex/nextjs-edge-runtime-test": patch
+---
+
+fix: import `@xenova/transformers`
+
+For now, if you use llamaindex in next.js, you need to add a plugin from `llamaindex/next` to ensure some module resolutions are correct.

README.md

@@ -78,6 +78,17 @@ node --import tsx ./main.ts
 
 ### Next.js
 
+First, you will need to add a llamaindex plugin to your Next.js project.
+
+```js
+// next.config.js
+const withLlamaIndex = require("llamaindex/next");
+
+module.exports = withLlamaIndex({
+  // your next.js config
+});
+```
+
 You can combine `ai` with `llamaindex` in Next.js with RSC (React Server Components).
 
 ```tsx

packages/core/e2e/examples/nextjs-agent/next.config.mjs

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {};
 
-export default nextConfig;
+import withLlamaIndex from "llamaindex/next";
+
+export default withLlamaIndex(nextConfig);

packages/core/e2e/examples/nextjs-edge-runtime/next.config.mjs

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {};
 
-export default nextConfig;
+import withLlamaIndex from "llamaindex/next";
+
+export default withLlamaIndex(nextConfig);

packages/core/e2e/examples/nextjs-edge-runtime/src/app/page.tsx

@@ -1,98 +1,20 @@
-import Image from "next/image";
-import "../utils/llm";
-import styles from "./page.module.css";
+import { tokenizerResultPromise } from "@/utils/llm";
+import { use } from "react";
 
 export const runtime = "edge";
 
 export default function Home() {
+  const result = use(tokenizerResultPromise);
   return (
-    <main className={styles.main}>
-      <div className={styles.description}>
-        <p>
-          Get started by editing&nbsp;
-          <code className={styles.code}>src/app/page.tsx</code>
-        </p>
+    <main>
+      <div>
+        <h1>Next.js Edge Runtime</h1>
         <div>
-          <a
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{" "}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className={styles.vercelLogo}
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
+          {result.map((value, index) => (
+            <span key={index}>{value}</span>
+          ))}
         </div>
       </div>
-
-      <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className={styles.grid}>
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Docs <span>-&gt;</span>
-          </h2>
-          <p>Find in-depth information about Next.js features and API.</p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Learn <span>-&gt;</span>
-          </h2>
-          <p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Templates <span>-&gt;</span>
-          </h2>
-          <p>Explore starter templates for Next.js.</p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Deploy <span>-&gt;</span>
-          </h2>
-          <p>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
     </main>
   );
 }