Video

do you have a video on how to deploy such an app on vercel (nextjs with strapi both on vercel?) and the db as well on vercel. the strapi cloud is super pricey

why i get this error? Unhandled Runtime Error Error: Cannot destructure property 'logoText' of 'data' as it is undefined. Source src\components\custom\Header.tsx (47:11) @ logoText 45 | /* eslint-disable */console.log(...oo_oo(`622079581_45_2_45_19_4`,user)); 46 | > 47 | const { logoText, ctaButton } = data; | ^ 48 | return ( 49 | <div className="flex items-center justify-between px-4 py-3 bg-white shadow-md dark:bg-gray-800"> 50 | <Logo text={logoText.text} />

GET /api/home-page 404 in 3137ms TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:14152:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async getStrapiData (webpack-internal:///(rsc)/./src/app/page.tsx:15:26) at async Home (webpack-internal:///(rsc)/./src/app/page.tsx:24:24) { cause: Error: connect ECONNREFUSED ::1:1337 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1495:16) at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) { errno: -4078, code: 'ECONNREFUSED', syscall: 'connect', address: '::1', port: 1337 } } undefined GET / 200 in 232ms import { Button } from "@/components/ui/button"; // Create a function that makes a request to Strapi endpoint // Use fetch() to call the baseUrl and append the path to the data we want get async function getStrapiData(path: string) { const baseUrl = "localhost:1337"; try { const response = await fetch(baseUrl + path); const data = await response.json(); return data; } catch (error) { console.error(error); } } // Using React Server Components, we can make Home() async and call getStrapiData() within our component to get our data export default async function Home() { const strapiData = await getStrapiData("/api/home-page"); console.log(strapiData); return ( <main className="container mx-auto py-6"> <Button>Our Cool Button</Button> </main> ); }

love it. i used strapi 4 for a lot of our projects before. hope we will have new admin platform which dev can enhance , develop more easily with vitejs and typescript. more document for developing plugins

hi kya jagah ?

This was a great tutorial on Strapi with NextJS. I completed up to deployment and confirmed all steps were working until then. After deploying, I noticed my hero section image was still not showing even though i did add the link. I am also unable to do anything after logging in. I get not authenticated when trying to summzrize a link and get logged out on any other links, Do you have any troubleshooting tips for this instance?

they both cant speak English properly. Worst pronunciation of English :(

Good, thank you very much for the explanation, then for each table that we relate to the user we have to create in the folder /api/summary/routes/summary.js this code 'use strict'; /** * summary router */ const { createCoreRouter } = require('@strapi/strapi').factories; module.exports = createCoreRouter('api::summary.summary', { config: { create: { middlewares: ['api::summary.on-summary-create'], }, find: { middlewares: ['global::is-owner'], }, findOne: { middlewares: [“global::is-owner”], }, update: { middlewares: [“global::is-owner”], }, delete: { middlewares: [“global::is-owner”], }, }, }); and to create a new entry with the “create” function you have to create another “middleware” in the path /api/summary/middlewares/on-summary-create.js and create this code to validate the user again “use strict”; module.exports = (config, { strapi }) => { return async (ctx, next) => { const user = ctx.state.user; if (!user) return ctx.unauthorized(“You are not authenticated”); const availableCredits = user.credits; if (availableCredits === 0) return ctx.unauthorized(“You do not have enough credits.”); await next(); // update the user's credits const uid = “plugin::users-permissions.user”; const payload = { data: { credits: availableCredits - 1, summaries: { connect: [ctx.response.body.data.id], }, }, }; try { await strapi.entityService.update(uid, user.id, payload); } catch (error) { ctx.badRequest(“Error Updating User Credits”); } console.log(“############ Inside middleware end #############”); }; }; so a middleware for the “summary” table as well as for the whole global context, or only the middleware for the “summary” table for the creation, only used for something specific?

Sometime during this video, I lost control of CMS to my localhost:3000. I made some changes to the Hero Section and I cant find the changes reflected. I tried restarting my frontend, back end and no luck. When i look online someone had a similar issue due to a second strapi process. Is there any help you can pass my way?

Thank you for the videos! Having a great time learning nextjs and you area a great instructor!

How did you got the globalData response in VS Code?? :D (2:19)

is it possible to customize the rich text editor. Like add colors palette to it on strapi so it can reflect on the code or what would be the best way to approach having color for text on the editor?

do validation for relational fields please

Ran into trouble fetching data from Strapi at 12:07 - for the baseUrl I had to use 127.0.0.1:1337 instead of localhost:1337

thank you for the super clear and well explained video, much appreciated its a huge time saver. I like how you can render each part using json, that way I can add a youtube text and video link in strapi admin and then grab that data on the front end and create a responsive front end video render to play the video. It gives me power as a developer to create the rules and yet save a bunch of time, thank you.

Why is it that when I register or log in to Strapi, it gives me a 'JWT', which is fine because it contains the user's information, but why with that token, even if it is another user's, can you edit another user's data that doesn't even belong to you? You should only be able to update data that belongs to you. Why does this happen? It is because of the 'Authenticated' flag, i.e. if a user sees the API path, he can POST or PUT into another table as if he is an administrator just by getting the "JWT" when it should not be so. How can I make this part more secure?

anyone knows how to get the 7/admin/settings/application-infos menu logo image on the front end side???

Please do a video on how to deploy strapi on cpanel

It didn't work for me. May be on latest version it's not working

Does this work for other JavaScript frameworks as well?

great tutorial

Hi,very nice video thank you for this video (and every other, im a big fan of strapi), i have a client which does not need all fields in rich text (for example image) and wants to ensure that its writers aren't using it in this rich text editor (as another block is made for and has much more customization enabled). It seems there is no way to filter the list of available fields to edit (heading, img, etc).

thank you. it's useful

how to reenter my strapi dashboard?

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. I had issues importing the Search. I had to change the Search.tsx to export default and import it into page.tsx without {} and it works. Maybe this helps someone

Where can we find this plugin?

This is Typescript, how can i find javascript code for signup and login page

Can I deploy the Strapi project to Vercel?

In case someone struggles with the population and everything, I came up with another, much simpler solution. Instead of rewriting a fucking controller, you can filter the request to the parent route by the slug so it will return just a single element. This way you can populate fields as in any other request. Hope it helps someone. export async function getSingleBlog(slug) { const url = new URL('/api/blogs'); url.search = qs.stringify({ filters: { slug, }, populate: { cover: { fields: ['url', 'alternativeText', 'width', 'height'], }, category: { fields: ['otherFieldsYouMightNeed'], }, }, }); // logic for sending request goes here }

Is there any free substitute for that? I don't wanna pay for cloud version just to get that 1 function i need

This is the last video oF series ?

This one's a skip unless you don't know how to clone a repo... as elmassiraelmassira eloquently put, "bla bla".

Hi. Curious why you need to do that Awaited<ReturnType> for summary.

Installing strapi via terminal in vs code is extremely slow

How to set up strapi account ? And is it free ?

Hi guys, if you're not seeing the changes in the API, you'll need to go into the plugin directory, run the build and then restart the strapi in the root folder. The watch admin flag won't work. Wasted 40 mins.

Can we have repeatable group field?

Will this homepage get indexed by google? Will it get rendered in serverside?

I already made my own renderer, only to find out you guys already made one! 😅 When video support for rich text editor?

Thanks Do you have video about using localization API for developers?

Part 8.2 Paging

if anyone makes changes in code and it is not automatically reflected in the frontend then try this command npm run develop -- --watch-admin , I also face this issue

GoodJob!

GoodJob!

GoodJob!

GoodJob!

Cool. Is there a way to also get type safety for the Strapi endpoints? Some generated types to inject into the `fetchStrapiData` function perhaps

Awesome, this is what I need rn

can you share git repo link?

Really enjoyed this series of content - thanks for putting it together!