Simply copy and paste the following command line in your terminal to create your first Strapi project.
npx create-strapi-app
my-project
IMPORTANT UPDATE Hello, you wonderful people. Paul here. I created this tutorial using Strapi 4 with Next JS, so it is not up to date with the recent release of Strapi 5.
Due to its popularity and many requests, I will start working on updating this post to reflect the new changes.
I will use the latest version of Next.js and Strapi 5. And update the posts as soon as possible.
Thank you for your patience while I work on the updates.
In this final post, we will look at how to deploy our Next.js project to Vercel.
In the last post, we covered how to deploy our backend to Strapi Cloud and seed it with initial data.
If you missed the previous post, you can find them in the following links.
If you prefer to learn with videos, we got you covered
If you don't have a Vercel account, let's go and create one.
Navigate to the following link here and click the "Sign Up" button to get started.
Now, complete the steps to create your account. I will choose the hobby plan and sign up using my GitHub account.
Now that we have created our Vercel account, let's prepare our frontend for deployment.
First things first, let's navigate to our Strapi Cloud deployed project and get the URL where our project is hosted.
You can get to your dashboard with the following link.
Once logged in to Strapi Cloud, navigate to your Project > Setting > Domains to see the domain in which your project is hosted.
Go ahead and copy it.
Before deploying your project, we will test it by pointing our local frontend to our deployed backend.
So on your local computer, navigate your projects, find your .env.local
file, and add the following variable.
1
STRAPI_URL=add_your_strapi_domain_here
Warning: This is not something you should do. But I just wanted to show you a common error that you may encounter if not properly configuring your image hostname. Afterwards we will revert out project to using our local dev database.
Now, we have to make a small change to our application. Originally I set up the NEXT_PUBLIC_STRAPI_URL
environmental variable.
Prepending NEXT_PUBLIC_
to an environmental variable will make it available on the client side. This would be fine in our project since our Strapi URL is public.
But since we only use it on the server side, we will rename it STRAPI_URL.
You can learn more about Next.js environmental variables here.
Navigate to the src/lib/utils.ts
file, and let's update our getStrapiUrl
function from this:
1
2
3
export function getStrapiURL() {
return process.env.NEXT_PUBLIC_STRAPI_URL ?? "http://localhost:1337";
}
To this:
1
2
3
export function getStrapiURL() {
return process.env.STRAPI_URL ?? "http://localhost:1337";
}
Now let's run the following command to test our project locally.
yarn dev
➜ frontend git:(main) ✗ yarn dev
yarn dev
yarn run v1.22.21
$ next dev
✔ Console Ninja extension is connected to Next.js, see https://tinyurl.com/2vt8jxzw
▲ Next.js 14.1.1
- Local: http://localhost:3000
- Environments: .env.local
✓ Ready in 1746ms
When you navigate the front end of your project, you will see the following error. This is normal since we did not set up our hostname
for our images inside the next.config.js
file.
⨯ node_modules/next/dist/shared/lib/image-loader.js (41:26) @ defaultLoader
⨯ Error: Invalid src prop (https://timely-joy-94aadb93be.media.strapiapp.com/ee53b3ce_4520_45da_a243_6c83f88de744_e9d2a1dc41.png) on `next/image`, hostname "timely-joy-94aadb93be.media.strapiapp.com" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host
at Array.map (<anonymous>)
You should see the URL in the error message.
So, let's fix this.
Navigate to your next.config.js
file and make the following changes inside the remotePatterns
array.
{
protocol: "https",
hostname: "timely-joy-94aadb93be.media.strapiapp.com",
}
Important: Ensure you use the Strapi media-hosted URL you saw in your error message.
It will be your project URL appended by .media.strapiapp.com
. I just used mine for this example. But you will need to replace it with yours. Now restart your Next.js frontend project, and everything should work.
Let's log in and create one summary as a test.
Excellent, it worked locally. Now, navigate to your Strapi CMS Admin on Strapi Cloud. You should see the newly created summary in your deployed Strapi project.
As a final test, I like to build my project locally and ensure we don't get any typescript
errors or messages.
In your terminal, run the following command.
yarn build
You should see the following output.
yarn build
yarn run v1.22.21
$ next build
▲ Next.js 14.1.1
- Environments: .env.local
Creating an optimized production build ...
✓ Compiled successfully
✓ Linting and checking the validity of types
✓ Collecting page data
✓ Generating static pages (11/11)
✓ Collecting build traces
✓ Finalizing page optimization
Route (app) Size First Load JS
┌ λ / 186 B 96.4 kB
├ λ /_not-found 0 B 0 B
├ λ /api/summarize 0 B 0 B
├ λ /dashboard 145 B 84.5 kB
├ λ /dashboard/account 5.36 kB 102 kB
├ λ /dashboard/summaries 4.16 kB 103 kB
├ λ /dashboard/summaries/[videoId] 1.52 kB 96.6 kB
├ λ /signin 1.51 kB 103 kB
└ λ /signup 1.56 kB 103 kB
+ First Load JS shared by all 84.4 kB
├ chunks/69-f27582ff9b9a5921.js 29 kB
├ chunks/fd9d1056-a7dafc042a96f77e.js 53.4 kB
└ other shared chunks (total) 2 kB
ƒ Middleware 70.3 kB
λ (Dynamic) server-rendered on demand using Node.js
✨ Done in 9.31s.
Great, no errors, we are ready for our final deployment.
So, let's first remove the following line in our .env.local
file that pointed to our Strapi Cloud production app.
STRAPI_URL=https://timely-joy-94aadb93be.strapiapp.com
I just did it to show the error you would get if you did not set up your hostname
for the images inside the next.config.js
file.
Moving forward, your local project should only point to your local development database. And never to production.
Finally, go ahead and save your latest changes to GitHub by doing the following command.
git add .
git commit -m "final update before Vercel deployment"
git push -u origin main
Now that all of our updates have been pushed. Let's deploy our Next.js project to Vercel!
Let's navigate back to our Vercel admin page. You should see the following page.
Go ahead and add your GitHub and point to your project repository.
Let's set up our project to use the Next.js as the framework
preset and Root Directory
to point to our project in the frontend
folder.
Finally, let's set up our environmental variable.
We will need to add the following environmental variables.
1
2
3
4
HOST=will_need_to_replace_after_initial_deploy
NODE_ENV=production
STRAPI_URL=your_deployed_strapi_app_url
OPENAI_API_KEY=your_open_ai_api_key
We need the HOST
and NODE_ENV
because our configuration will require them for our set and get cookies function, which is found in the auth-actions.ts
file.
You should see the following config object.
1
2
3
4
5
6
7
const config = {
maxAge: 60 * 60 * 24 * 7, // 1 week
path: "/",
domain: process.env.HOST ?? "localhost",
httpOnly: true,
secure: process.env.NODE_ENV === "production",
};
Double-check your code in the auth-actions.ts
file to ensure that the config object is passed in all of our cookies().set()
functions.
The completed code for the auth-actions.ts
file can be found below.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
"use server";
import { z } from "zod";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import {
registerUserService,
loginUserService,
} from "@/data/services/auth-service";
const config = {
maxAge: 60 * 60 * 24 * 7, // 1 week
path: "/",
domain: process.env.HOST ?? "localhost",
httpOnly: true,
secure: process.env.NODE_ENV === "production",
};
const schemaRegister = z.object({
username: z.string().min(3).max(20, {
message: "Username must be between 3 and 20 characters",
}),
password: z.string().min(6).max(100, {
message: "Password must be between 6 and 100 characters",
}),
email: z.string().email({
message: "Please enter a valid email address",
}),
});
export async function registerUserAction(prevState: any, formData: FormData) {
const validatedFields = schemaRegister.safeParse({
username: formData.get("username"),
password: formData.get("password"),
email: formData.get("email"),
});
if (!validatedFields.success) {
return {
...prevState,
zodErrors: validatedFields.error.flatten().fieldErrors,
strapiErrors: null,
message: "Missing Fields. Failed to Register.",
};
}
const responseData = await registerUserService(validatedFields.data);
if (!responseData) {
return {
...prevState,
strapiErrors: null,
zodErrors: null,
message: "Ops! Something went wrong. Please try again.",
};
}
if (responseData.error) {
return {
...prevState,
strapiErrors: responseData.error,
zodErrors: null,
message: "Failed to Register.",
};
}
cookies().set("jwt", responseData.jwt, config);
redirect("/dashboard");
}
const schemaLogin = z.object({
identifier: z
.string()
.min(3, {
message: "Identifier must have at least 3 or more characters",
})
.max(20, {
message: "Please enter a valid username or email address",
}),
password: z
.string()
.min(6, {
message: "Password must have at least 6 or more characters",
})
.max(100, {
message: "Password must be between 6 and 100 characters",
}),
});
export async function loginUserAction(prevState: any, formData: FormData) {
const validatedFields = schemaLogin.safeParse({
identifier: formData.get("identifier"),
password: formData.get("password"),
});
if (!validatedFields.success) {
return {
...prevState,
zodErrors: validatedFields.error.flatten().fieldErrors,
message: "Missing Fields. Failed to Login.",
};
}
const responseData = await loginUserService(validatedFields.data);
if (!responseData) {
return {
...prevState,
strapiErrors: responseData.error,
zodErrors: null,
message: "Ops! Something went wrong. Please try again.",
};
}
if (responseData.error) {
return {
...prevState,
strapiErrors: responseData.error,
zodErrors: null,
message: "Failed to Login.",
};
}
cookies().set("jwt", responseData.jwt, config);
redirect("/dashboard");
}
export async function logoutAction() {
cookies().set("jwt", "", { ...config, maxAge: 0 });
redirect("/");
}
After you add the following environmental variable, you can click the deploy button to deploy your project.
Once the initial deployment is finished, let's copy the deployed URL and use it to set our HOST
environmental variable, which is required for our cookies to be set properly.
Once you update the environment variable and redeploy, you should be able to log in and see your secure httpOnly cookies being set.
In this tutorial, we focused on the basic implementation of setting httpOnly cookies. Check out this awesome in-depth video by Lee Robinson on the topic.
When building your Next.js application, keep this in mind. Different environments come with different caveats.
In our case, our summarize function takes more than 10 seconds to summarize a video. If you are using a hobby plan, this will trigger the FUNCTION_INVOCATION_TIMEOUT
error.
This may have many causes; you can read more about it here. But in my case, it was because, on a hobby plan, you only get 10s execution time for functions.
I decided to go with the most straightforward solution before exploring other options.
Upgrading to the PRO plan gives you the ability to increase function execution time up to 300
seconds. You can find all the details here.
After upgrading to the pro plan, I could increase the runtime limit in my app with the following change in the src/app/api/summarize/route.ts
file.
1
2
export const maxDuration = 150;
export const dynamic = "force-dynamic";
The completed file looks like the following.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import { NextRequest } from "next/server";
import { ChatOpenAI } from "@langchain/openai";
import { PromptTemplate } from "@langchain/core/prompts";
import { StringOutputParser } from "@langchain/core/output_parsers";
import { fetchTranscript } from "@/lib/youtube-transcript";
import { getUserMeLoader } from "@/data/services/get-user-me-loader";
import { getAuthToken } from "@/data/services/get-token";
export const maxDuration = 150;
export const dynamic = "force-dynamic";
function transformData(data: any[]) {
let text = "";
data.forEach((item) => {
text += item.text + " ";
});
return {
data: data,
text: text.trim(),
};
}
const TEMPLATE = `
INSTRUCTIONS:
For the this {text} complete the following steps.
Generate the title based on the content provided
Summarize the following content and include 5 key topics, writing in first person using normal tone of voice.
Write a youtube video description
- Include heading and sections.
- Incorporate keywords and key takeaways
Generate bulleted list of key points and benefits
Return possible and best recommended key words
`;
async function generateSummary(content: string, template: string) {
const prompt = PromptTemplate.fromTemplate(template);
const model = new ChatOpenAI({
openAIApiKey: process.env.OPENAI_API_KEY,
modelName: process.env.OPENAI_MODEL ?? "gpt-4-turbo-preview",
temperature: process.env.OPENAI_TEMPERATURE
? parseFloat(process.env.OPENAI_TEMPERATURE)
: 0.7,
maxTokens: process.env.OPENAI_MAX_TOKENS
? parseInt(process.env.OPENAI_MAX_TOKENS)
: 4000,
});
const outputParser = new StringOutputParser();
const chain = prompt.pipe(model).pipe(outputParser);
try {
const summary = await chain.invoke({ text: content });
return summary;
} catch (error) {
if (error instanceof Error)
return new Response(JSON.stringify({ error: error.message }));
return new Response(
JSON.stringify({ error: "Failed to generate summary." })
);
}
}
export async function POST(req: NextRequest) {
console.log("FROM OUR ROUTE HANDLER:", req.body);
const user = await getUserMeLoader();
const token = await getAuthToken();
if (!user.ok || !token)
return new Response(
JSON.stringify({ data: null, error: "Not authenticated" }),
{ status: 401 }
);
if (user.data.credits < 1)
return new Response(
JSON.stringify({
data: null,
error: "Insufficient credits",
}),
{ status: 402 }
);
const body = await req.json();
const { videoId } = body;
let transcript: Awaited<ReturnType<typeof fetchTranscript>>;
try {
transcript = await fetchTranscript(videoId);
const transformedData = transformData(transcript);
console.log("Transcript:", transformedData.text);
let summary: Awaited<ReturnType<typeof generateSummary>>;
summary = await generateSummary(transformedData.text, TEMPLATE);
console.log("Summary:", summary);
return new Response(JSON.stringify({ data: summary, error: null }));
} catch (error) {
console.error("Error processing request:", error);
if (error instanceof Error)
return new Response(JSON.stringify({ error: error }));
return new Response(JSON.stringify({ error: "Unknown error" }));
}
}
Once you make the change, save your changes to GitHub
and redeploy.
Let's try this again.
This brings me to my final thoughts.
When building an application, it is essential to consider your use case and limitations and plan your project accordingly.
One thing to consider is refactoring the application to use streaming. This is one way to get past the time limit limitation, and I will challenge you to explore it.
You can start here. Next.js also has an AI SDK that simplifies working with AI and LLMs. You can learn more about it here.
It may seem like the end of the blog series, but it is just the beginning. We learned how to build a complete CRUD Next.js application with authentication and file upload functionality. We explored how to utilize Strapi CMS to manage our content and users. You know, have a great starting point to continue building and adding new features. We also deployed our project to Strapi Cloud and Vercel. We could have taken many other approaches. For instance, we could have moved all the summarization logic into Strapi as a plugin. We could also use a queuing system to handle long-executing tasks and return them as they are done rather than waiting for them.
But with that being said, thank you so much for your time. This tutorial/video series took me a long time to make, and I hope you had fun following along. Also, if you spot any mistakes or have questions, please leave them in the comments, and I will update the blog post accordingly.
Even though this is the end of this series, as I discover new cool things around Next.js and Strapi, I will create follow-up content and updates. Also, I will move this repo to Strapi's GitHub. It will be open-source, so anyone can help us improve or use it as a starting point for a new project. I will add the link here once I am done.
Thank you. If you want to share your feedback, good or bad, you can find me hanging out in Strapi's "open office" Monday through Friday at 12:30 PM CST. You can also join us via Discord.