Merge pull request #101 from replicate/use-next-js-app-router

migrate from Next.js Page router to App router
replicate · May 13, 2024 · 69ba9db · 69ba9db
2 parents 8321e5d + 41047c7
commit 69ba9db
Show file tree

Hide file tree

Showing 11 changed files with 607 additions and 316 deletions.
diff --git a/README.md b/README.md
@@ -2,13 +2,15 @@
 
 This is a [Next.js](https://nextjs.org/) template project that's preconfigured to work with Replicate's API.
 
+It uses Next's newer [App Router](https://nextjs.org/docs/app) and [Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components).
+
 You can use this as a quick jumping-off point to build a web app using Replicate's API, or you can recreate this codebase from scratch by following the guide at [replicate.com/docs/get-started/nextjs](https://replicate.com/docs/get-started/nextjs)
 
 ## Noteworthy files
 
-- [pages/index.js](pages/index.js) - The React frontend that renders the home page in the browser
-- [pages/api/predictions/index.js](pages/api/predictions/index.js) - The backend API endpoint that calls Replicate's API to create a prediction
-- [pages/api/predictions/[id].js](pages/api/predictions/[id].js) - The backend API endpoint that calls Replicate's API to get the prediction result
+- [app/page.js](app/page.js) - The React frontend that renders the home page in the browser
+- [app/api/predictions/routes.js](app/api/predictions/routes.js) - The backend API endpoint that calls Replicate's API to create a prediction
+- [app/api/predictions/[id]/routes.js](pages/api/predictions/[id]/routes.js) - The backend API endpoint that calls Replicate's API to get the prediction result
 
 ## Usage
 

diff --git a/app/api/predictions/[id]/route.js b/app/api/predictions/[id]/route.js
@@ -0,0 +1,17 @@
+import { NextResponse } from 'next/server';
+import Replicate from 'replicate';
+
+const replicate = new Replicate({
+  auth: process.env.REPLICATE_API_TOKEN,
+});
+
+export async function GET(request, {params}) {
+  const { id } = params;
+  const prediction = await replicate.predictions.get(id);
+
+  if (prediction?.error) {
+    return NextResponse.json({ detail: prediction.error }, { status: 500 });
+  }
+
+  return NextResponse.json(prediction);
+}
diff --git a/app/api/predictions/route.js b/app/api/predictions/route.js
@@ -0,0 +1,27 @@
+import { NextResponse } from 'next/server';
+import Replicate from 'replicate';
+
+const replicate = new Replicate({
+  auth: process.env.REPLICATE_API_TOKEN,
+});
+
+export async function POST(request) {
+  if (!process.env.REPLICATE_API_TOKEN) {
+    throw new Error(
+      'The REPLICATE_API_TOKEN environment variable is not set. See README.md for instructions on how to set it.'
+    );
+  }
+
+  const { prompt } = await request.json();
+
+  const prediction = await replicate.predictions.create({
+    version: '8beff3369e81422112d93b89ca01426147de542cd4684c244b673b105188fe5f',
+    input: { prompt },
+  });
+
+  if (prediction?.error) {
+    return NextResponse.json({ detail: prediction.error }, { status: 500 });
+  }
+
+  return NextResponse.json(prediction, { status: 201 });
+}
diff --git a/app/layout.js b/app/layout.js
@@ -0,0 +1,13 @@
+import "../styles/globals.css";
+
+export default function RootLayout({
+  // Layouts must accept a children prop.
+  // This will be populated with nested layouts or pages
+  children,
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/pages/index.js → app/page.js b/pages/index.js → app/page.js
@@ -1,9 +1,10 @@
+'use client';
+
 import { useState } from "react";
-import Head from "next/head";
 import Image from "next/image";
 
 const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
-
+ 
 export default function Home() {
   const [prediction, setPrediction] = useState(null);
   const [error, setError] = useState(null);
@@ -44,10 +45,6 @@ export default function Home() {
 
   return (
     <div className="container max-w-2xl mx-auto p-5">
-      <Head>
-        <title>Replicate + Next.js</title>
-      </Head>
-
       <h1 className="py-6 text-center font-bold text-2xl">
         Dream something with{" "}
         <a href="https://replicate.com/stability-ai/sdxl?utm_source=project&utm_project=getting-started">