quick note at 26:57: since Wikipedia's query is actually returned as a key/value pair JSON object, I found that it's more accurate to type it as { [key: string]: Result } instead of Result[]. This more accurately represents why the results const is mapped over via Object.values(results) instead of just results.map() if it were already an array.
Greetings Dave, thank you very much for your videos... Jose Grillo from Venezuela over here..... Reporting, giving a hand up hahaha and commenting... one hand washes the other and both wash their faces many blessings...
wow thanks a lot Dave! I think you're the first one to cover the API search functionality for Next 13.2. actually I did refactor a 4 year-old react js tutorial build a lyrics app with next, and with the help from this video I refactor the app very very smoothly!
Thank you so much, this helps me a lot, please continue on this progress when Next get another update on Next 13, I see many difference feature that they did not release yet
Awesome video Dave! Just a tip - if you want to test whether loading works or not you can always use the chrome developer tools to change your network connection to slow 3G
Hey Dave, thanks for your wonderful work. Can you please make a short video of "Best practise of directory structure of small or medium scale project with NextJS or any fullstack MERN or PERN application using MVC architecture"
I watched your video "React Login Authentication with JWT Access, Refresh Tokens" I don't know where and how we can integrate it into nextjs. Maybe you can do the same concept, but for NextJS 13 tutorial in the future.
Wonderful explanation. that's what I was looking for. Can you please make a video of this new React component modal. Like how to decide which approach to use SSR or CSR and what would be the drawbacks of certain approach.
Hey Dave, why do we need to create multiple components folders for different pages ? Like we have components folder for Navbar as well as dynamic page. Instead of that can't we just create one folder for components ( Inside the app directory ) and use it everywhere
I prefer this organization as it keeps components with their branch/route. However, you can organize your files however you want to. I show examples - not the _only way_ to do things. There is usually more than one way.
I looked into this a while ago seems a lot of companies prefer this, if your project goes bigger your root components folder will be really hard to navigate. Also, this was one of the driving forces behind the App directory. Before Next worked with a page folder and every file inside it no mater what name you gave became a page...
Hello Dave, just switching from CRA to Next and watched all your Next Content, thanks for sharing it, that's really great ! btw in this project i had to create a function // function removeHtmlTags(text: string): string { return text.replace(/]+>| /g, ''); } // otherwise text was displayed with html tags ...
I previously covered server components in the earlier lessons? You mentioned databases - one may be used after this but it might be best to make it as a follow up video as it is a separate technology.
This is a good start tutorial, thank you Dave! I have a question is it better if we can make the error and loading page reusable, instead placing them inside the [searchTerm] folder instead having error and loading page for each page folder?
Yes, you can get more granular at each level if you want, but errors will bubble up to the nearest boundary. Discussion here: beta.nextjs.org/docs/routing/error-handling#nested-routes
Hey Dave. Thks for this video. In this video you call a dynamic route called [SeachTerm] from Search component. I don't see where you define that your search component will call that specific dynamic route [SearchItem] and not another (in case there would be others) ?
The Search component uses router.push to add the search term to the URL. The dynamic [searchTerm] route represents that search term. The page.tsx in that route pulls in the term as a param. You can check the source code in the course resources for this lesson if you missed that in the video or rewatch.
@@DaveGrayTeachesCode Thks :) I've seen this. But you call in the component : "router.push(`/${search}/`)". search is different than [searchTerm] if I have another route dynamic [exempleTerm]. How do you define that "router.push(`/${search}/`)" must use [searchTerm] and not [exempleTerm] ?
I was following along, but for some strange reason, is giving me an error on [searchTerm] page: TypeError: cookies is not iterable, which I couldn't figure out why
Nice lessson . But when I fetch wikipedia api got an error Internal error: TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11730:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Hello, I am facing problems using next 13 app directory with antd, antd styles are not loading on initial load. how to solve the issue can you please help me?
Great videos about next.js 13 and I love all your videos. I been stuck on getting uncaught SyntaxError "undefined" after adding and testing client component. I trying to find the solution and still can't find it. Can you help me, sir?
Thank you so much for the tutorial Dave. Can you tell me what VS Code plug-in are you using at 6:07 that highlights the scope of a parentheses or a bracket ?
Hello Dave, why do I get this when I add "use client"; at the very top of my page.tsx Unhandled Runtime Error SyntaxError: "undefined" is not valid JSON
A couple of possibilities. 1) You are using version 13.3 and it is still a bit buggy - so try rolling back to 13.2.4. ..or 2) You really do have an undefined value you are trying to get JSON from.
Thanks for the request! I may get into the API part of Next.js as well. I'm not sure why you would want to use RTK Query here as Next.js does a great job with the cache and deduping requests.
@@DaveGrayTeachesCode i think in order to fetch data from an api you need some sort of query library to query data does next js has its own solution for that?
Hey Dave, 'use client' directive is currently useful? I am new to NextJS. When using or not using that directive, component looks like rendering in the server and hydrating in the client, and not as explained by NextJS docs (they say client components only render on the client as if it were pure React) I can notice this by using console.log() into the component before the return statement, and I can notice that the printing is produced both in my terminal and in the browser! Thanks for your attention.
"use client" makes Next.js create a client component. If you have any type of interactivity in the component, this is what you need. They are very useful and are essentially React components.
Superb, superb. Thank you again. But I can not practice it. After installation when I start my app with npm run dev, it immediately stop after start without any error or waring. I install various node and next version, even try to run your project, its always given the same result. I feel like a fool. Even stackoverflow didn't help me. Some of them tell me to change version of node and next. Can you help me?
You're welcome. All I can suggest is to go back to the first video in this series and follow the step by step instructions that I show in the video for installation. This video also starts from scratch with a Next.js project, but I do not show installing Node.js here.
I was planning on making a different website for practice with a different api, how would I get the search params for the website with the api? or if easier, how did you get the params for the wiki api. ps thank you for the hours of content you have provided me 🎉
in case there was no button alongside the search input but instead the input's onChange will trigger the api request adding a debounce to the input would be necessary?
Check the package.json file I have for that lesson and consider installing that version of Next.js instead of the "@latest" version with the npm command. 13.3 was just released yesterday and it is buggy. If you just installed today, that's what you have.
Hey, not sure whether i'm right but isn't it better to use nextjs Image component in our Item component instead of `default` img or it would be `overkill` in that simple project? Thank you in advance!
I think I mention in the video that you could, but here - especially pulling in small thumbnail images from Wikipedia - it is easier to just use the img element. That said, in a later project I do show how to pull images from another domain which requires some settings in your next.config.js file, too.
I am unsure why, but my server side rendering is not working. Could that be because Redux Store Provides an entire app? So I am still struggling to convert my NextJS 12 app into ver 13
I recommend checking my package.json file for each video in this series and using the version of Next.js that I use in the video to avoid anything unexpected. Some versions have more bugs than others.
hi, thanks for lessons but on me link type "en.wikipedia.org/?cruid=${result.pageid}" don`t work but worked "en.wikipedia.org/wiki/${result.title}" it`s ok ?
one of the best teacher of my entire life , every day watch your videos
Glad to hear that! Thank you!
Chef Dave has been “cooking” lately! 🥘 👌
And I smell tacos! 🌮🌮🌮 😆
only finished about 5 videos in this series but i've learned a lot .Thanks Dave!
Impressive lesson as usual!. Lot of stuff, my brain is burning 😜. Thanks Dave!
Thanks brother dave, our big brother and teacher
Welcome!
quick note at 26:57: since Wikipedia's query is actually returned as a key/value pair JSON object, I found that it's more accurate to type it as { [key: string]: Result } instead of Result[]. This more accurately represents why the results const is mapped over via Object.values(results) instead of just results.map() if it were already an array.
best best best next13 vid on YT
Thank you!
Greetings Dave, thank you very much for your videos... Jose Grillo from Venezuela over here..... Reporting, giving a hand up hahaha and commenting... one hand washes the other and both wash their faces
many blessings...
Many thanks!
high quality tutos, thanks.
Glad you like them!
wow thanks a lot Dave! I think you're the first one to cover the API search functionality for Next 13.2. actually I did refactor a 4 year-old react js tutorial build a lyrics app with next, and with the help from this video I refactor the app very very smoothly!
Glad it helped!
Thank you for this amazing tutorial
You're welcome!
Thank you so much, this helps me a lot, please continue on this progress when Next get another update on Next 13, I see many difference feature that they did not release yet
You're welcome!
Yay Dave code tailwind css with next. Wat I needed
Right on! 🚀
Awesome video Dave! Just a tip - if you want to test whether loading works or not you can always use the chrome developer tools to change your network connection to slow 3G
he knows bro he teach us ❤❤
Hey Dave, thanks for your wonderful work. Can you please make a short video of "Best practise of directory structure of small or medium scale project with NextJS or any fullstack MERN or PERN application using MVC architecture"
Thankyou for the amazing tutorials. Could you please tell how many videos are you planning for this course and till when?
I don't have a set number of videos. I just follow the content.
Thank you, Dave
You're welcome!
Awesome series ☺️
Glad to hear that!
Excellent tutorial!
I watched your video "React Login Authentication with JWT Access, Refresh Tokens"
I don't know where and how we can integrate it into nextjs.
Maybe you can do the same concept, but for NextJS 13 tutorial in the future.
I will definitely explore auth with Next.js in the future.
You amazing teacher
thanks a lot for all great content of yours 🌷🌷
So nice of you!
Wonderful explanation. that's what I was looking for. Can you please make a video of this new React component modal. Like how to decide which approach to use SSR or CSR and what would be the drawbacks of certain approach.
Thank you for the request!
Amazing course! Keep it coming!
Thanks! Will do!
Hey Dave, why do we need to create multiple components folders for different pages ? Like we have components folder for Navbar as well as dynamic page. Instead of that can't we just create one folder for components ( Inside the app directory ) and use it everywhere
I prefer this organization as it keeps components with their branch/route. However, you can organize your files however you want to. I show examples - not the _only way_ to do things. There is usually more than one way.
I looked into this a while ago seems a lot of companies prefer this, if your project goes bigger your root components folder will be really hard to navigate. Also, this was one of the driving forces behind the App directory. Before Next worked with a page folder and every file inside it no mater what name you gave became a page...
Your videos are awesome, very helpful!
Glad you like them!
Hello Dave, just switching from CRA to Next and watched all your Next Content, thanks for sharing it, that's really great !
btw in this project i had to create a function
// function removeHtmlTags(text: string): string {
return text.replace(/]+>| /g, '');
} //
otherwise text was displayed with html tags ...
Good note! I didn't notice that, but maybe I didn't search for the right things from the Wikipedia API.
Thank you
Can't wait for the server components
And please use Postgres, not Mongo
I previously covered server components in the earlier lessons? You mentioned databases - one may be used after this but it might be best to make it as a follow up video as it is a separate technology.
thank you dave
Welcome!
This is a good start tutorial, thank you Dave! I have a question is it better if we can make the error and loading page reusable, instead placing them inside the [searchTerm] folder instead having error and loading page for each page folder?
Yes, you can get more granular at each level if you want, but errors will bubble up to the nearest boundary. Discussion here: beta.nextjs.org/docs/routing/error-handling#nested-routes
it was great thank you dave
You're welcome!
Amazing. Thanks
Any Nextjs with typescript videos??
Have you watched this series? TypeScript is in all of the videos.
Yes, I am watching... Just asked is there any separate playlist or not
Love to see you as my mentor ❣️❣️❣️
Wow! Thanks!
Welcome!
Keep it up 🙂🙂🙂
Thank you!
i am still not ready for nex.js 13 makes me confuse now! specially in layout face is unusual to me
Sir thanks a lot for the lesson 😊. I have one doubt handleSubmit function on search component why is it an async function.
Good catch! It is not necessary!
Hey Dave. Thks for this video. In this video you call a dynamic route called [SeachTerm] from Search component. I don't see where you define that your search component will call that specific dynamic route [SearchItem] and not another (in case there would be others) ?
The Search component uses router.push to add the search term to the URL. The dynamic [searchTerm] route represents that search term. The page.tsx in that route pulls in the term as a param. You can check the source code in the course resources for this lesson if you missed that in the video or rewatch.
@@DaveGrayTeachesCode Thks :) I've seen this. But you call in the component : "router.push(`/${search}/`)". search is different than [searchTerm] if I have another route dynamic [exempleTerm]. How do you define that "router.push(`/${search}/`)" must use [searchTerm] and not [exempleTerm] ?
I was following along, but for some strange reason, is giving me an error on [searchTerm] page: TypeError: cookies is not iterable, which I couldn't figure out why
Well, I fixed by using axios.. it seems the fetch api had a bug of some sort
Thanks!
Welcome!
Thank you for the video :)
Just wondering, how did you configure your "rfc" emmet without the react import :/
I'm using ES7 React snippets.
Nice lessson .
But when I fetch wikipedia api got an error
Internal error: TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11730:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
please make a video on public and private routes so only authenticated and authorized user can visit a particular page
Thank you for the request!
Hello, I am facing problems using next 13 app directory with antd, antd styles are not loading on initial load. how to solve the issue can you please help me?
Great videos about next.js 13 and I love all your videos. I been stuck on getting uncaught SyntaxError "undefined" after adding and testing client component. I trying to find the solution and still can't find it. Can you help me, sir?
Likely an issue with version 13.3. I recommend going to version 13.2.4 and trying again. At the terminal: npm i next@13.2.4
Thank you so much for the tutorial Dave. Can you tell me what VS Code plug-in are you using at 6:07 that highlights the scope of a parentheses or a bracket ?
Here is how to do that: ruclips.net/user/shortsMDaxWffMjrQ
@@DaveGrayTeachesCode thank you very much for taking the time to reply my question.
Hello Dave, why do I get this when I add "use client"; at the very top of my page.tsx
Unhandled Runtime Error
SyntaxError: "undefined" is not valid JSON
A couple of possibilities. 1) You are using version 13.3 and it is still a bit buggy - so try rolling back to 13.2.4. ..or 2) You really do have an undefined value you are trying to get JSON from.
@@DaveGrayTeachesCode The temporary solution is to use an arrow function.
Dave, I am not able to see the results on my page. If anyone else can help, please do help.
can you make auth system with express js and nextjs with refresh tokens and server side rendering + using rtk query for fetching some data
Thanks for the request! I may get into the API part of Next.js as well. I'm not sure why you would want to use RTK Query here as Next.js does a great job with the cache and deduping requests.
@@DaveGrayTeachesCode i think in order to fetch data from an api you need some sort of query library to query data does next js has its own solution for that?
Hey Dave, 'use client' directive is currently useful? I am new to NextJS. When using or not using that directive, component looks like rendering in the server and hydrating in the client, and not as explained by NextJS docs (they say client components only render on the client as if it were pure React) I can notice this by using console.log() into the component before the return statement, and I can notice that the printing is produced both in my terminal and in the browser! Thanks for your attention.
"use client" makes Next.js create a client component. If you have any type of interactivity in the component, this is what you need. They are very useful and are essentially React components.
hahah i love your choice iin musicians. please what is your favourite zappa song?
Thank you! Joe's Garage from the album of the same name. 🤘
Superb, superb. Thank you again. But I can not practice it. After installation when I start my app with npm run dev, it immediately stop after start without any error or waring. I install various node and next version, even try to run your project, its always given the same result. I feel like a fool. Even stackoverflow didn't help me. Some of them tell me to change version of node and next. Can you help me?
You're welcome. All I can suggest is to go back to the first video in this series and follow the step by step instructions that I show in the video for installation. This video also starts from scratch with a Next.js project, but I do not show installing Node.js here.
Idk why my html tags all are behaving default whether using h1 or div all are showing same(
are not working after installing tailwindcss )
You must apply Tailwind styles. Otherwise, they will all look the same. If you haven't worked with Tailwind before, this is expected.
I was planning on making a different website for practice with a different api, how would I get the search params for the website with the api? or if easier, how did you get the params for the wiki api.
ps thank you for the hours of content you have provided me 🎉
You're welcome! You need to look at the documentation for whichever API you want to use. They are all different.
in case there was no button alongside the search input but instead the input's onChange will trigger the api request adding a debounce to the input would be necessary?
It would be a great idea to add debounce in that case.
is it the last video of next js , please reply sir !
I always try to reply. Sometimes a bit overwhelmed. Answer: No, there will be more.
Error while keeping Search componet inside Navbar, It deos not allow in 13.0 next version. Could not find fix, can u help?
Check the package.json file I have for that lesson and consider installing that version of Next.js instead of the "@latest" version with the npm command. 13.3 was just released yesterday and it is buggy. If you just installed today, that's what you have.
grate content
Thank you!
Hey, not sure whether i'm right but isn't it better to use nextjs Image component in our Item component instead of `default` img or it would be `overkill` in that simple project? Thank you in advance!
I think I mention in the video that you could, but here - especially pulling in small thumbnail images from Wikipedia - it is easier to just use the img element. That said, in a later project I do show how to pull images from another domain which requires some settings in your next.config.js file, too.
thanks for the answer!
I am unsure why, but my server side rendering is not working. Could that be because Redux Store Provides an entire app?
So I am still struggling to convert my NextJS 12 app into ver 13
So many details in your code that no one else knows, but in general, Redux is state management in the client. It should not impact your SSR.
13.3 ask tailwid while installation itself. What is happening with React/next?
Seems like you're up to date!
I am not sure but cant you just have your app folder inside the src/ folder?
yes, app will be in the src folder when you select src folder during setup
The small project came at the right time, and a whole bunch of fundamental concepts can make the bravest of men depressed.
I'm assuming all of the above is still valid for 13.4
I recommend checking my package.json file for each video in this series and using the version of Next.js that I use in the video to avoid anything unexpected. Some versions have more bugs than others.
Bro next let Angular . pls
hi, thanks for lessons
but on me link type "en.wikipedia.org/?cruid=${result.pageid}" don`t work
but worked "en.wikipedia.org/wiki/${result.title}" it`s ok ?