Видео

I dont know how to pin.

@@goodxp oke

I agree. Unfortunately. There was a microphone issue as it would seem. I am sure I will not have the same tech difficulties in the following streams. I am a new channel and growing in public. Your support means a lot. So subscribe, stick around and i will see you in the next one I hope.

That is unfortunate. Looks like obs stopped picking up my microphone. I was telling the secret to the universe but now noone will be able to hear it

Oh shoot. Ok I plan to make a video about setting up a project with Next v14, next-auth for authentication, tRPC and prisma for type safe API, nextui for accessible component library and much more. Also Most up to date tsconfig and eslint configuration, for which I have spent hours to curate and consolidate from best resources, repos and most influential developers’ preferences. Thanks for sticking around while I was in transition. ❤️

@@goodxp <3

Well you need to import globals.css in preview file as well.

I am not versed on app router. Getting into it myself. Still studying it. Dont really know how pacages work with each other at this point. Next.js documentation on testing should provide ample information.

@@goodxp nvm i already figured it out

depends on the situation? are you trying to extend the tailwind? in that case, that may be some errors in tailwind config, or new config may not be rebuilt.

@@goodxpit eslint error no custom classname

Well, if you skipped the earlier points in the videos watch those. Especially where i setup project eslint tailwind etc. Those are crucial. Other than that you can check the github repo and compare relevant files to see if you have any difference

Good idea. Lets do it on record. Lets migrate to using app directory. We can also implement loading skeletons and everything for the client side data

thank you! I intend to see this through and finish it. I want to publish it as my actual personal website. :) It has its ups and downs but I keep working on it. :) Part 15 is about to go live in 10 minutes! Catch me up if you can. lol. And spread the word if you can, more the merrier.

if I understood correctly, you want to have a home page for blog posts, where you will show each post as a list item or a card etc. that should be like this: /pages - - | /blog - - - - | [id].tsx --> you have this one for individual post renders - - - - | index.tsx --> you should have this page in order to render /blog URL. in the index.tsx you will use either getServerSideProps or getStaticProps to fetch all the posts. That should be what you are looking for I hope. For pagination there can be different solutions for different use cases and different data. I hope this answers your questions. if not, feel free to drop by a live stream, which occurs regularly on monday, wednesday and friday mornings CET(central european time). Thank you for your comments and questions!

yes that is a good question and there is a better answer for it. :) It is a good thing you mentioned this and let me address it on record. But until than you can reference to this page on next.js documentation: nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration

And i love this comment!

Teşekkürler 🙏

hey, thanks for the amazement!!!

Check if the selection is evaluating case senstive or white spaces? What you describe feels like it might be considering the whitespace before the keyword

@@goodxp It turns out I had to activate the search 'Widget' (CTRL+F) and deselect Match Whole Word icon. There's nothing in Settings for this and it appears deselecting it persists between VS Code loads. 🙂

@@dazecm yes that can happen

Hello 😊 and welcome

I realised I had a missing comma in my VS Code settings file and the "tailwindCSS.experimental.classRegex" config line fir the cva package was not being picked up 🙂

Glad that you figured it out. For the story book. Check preview.js file in storybook folder if it imports css file

What's up?

Just posted an update on Storybook Github issues regarding getting it working for those of us using pnpm package manager. Here's my post: I was running into that issue but since upgrading pnpm to version 8.1.1 and running pnpm dlx sb@next init that installs Storybook version 7.1.0-alpha.0, it seems to install and work fine without needing to manually add more dependencies on my Windows 11 system with node version 18.15.0.

It is definitely an overkill on a scale similar to this project, but if you have a lot of components that are used across the app, that is a very powerful tool.

I appreciate the pro-active mentality!

@@goodxp Good UI tool experience if you land a job at a web dev shop that does work for clients though.

Come to think of it, your colour choices are also good and colour is another aspect of design I'm not great at so far 🙂

I wouldn't say I am goot at those myself and I am definitely not a designer. I just read and watch as much as I can and try to imitate what I learn :)

Yeah I can also talk about those stuff. In fact, in the following videos, I will design the post page layout and we will spend time in figma. So I guess that would be a good place to talk about those.

great to hear that! Thanks for your feedback!

I wonder if VS Code hiccups may be related to when you ALT-TAB in and out to discuss other things such as your Figma diagram or switching to the browser when discussing Docs for things like Tailwind, Next.js etc? It could be that the background static analysis processes that help things such as linting and keeping track of package imports so we can use the Auto Import feature gets a little confused as focus is taken away from the VS Code Window. Super-annoying if so and the VS Code team should keep it's background processes from being interrupted during ALT+TAB switching. This is just my guess though 🙂

I will experiment with this to see if that is the case.

Thanks for the tips. I will keep those in mind. And another thanks for your genuine and detailed feedbacks. really appreciated.

Agreed. I value the process as much as the result. There are more learning opportunities in the process. We know it happens to everyone :)

Not really, you are the first. Thank you ☺️

Thank you for your feedback. Indeed font was small and I increased it in the following videos. If they are still small let me know.

I already increased it to a size that i am almost uncomfortable with. Let me see if I can find a good solution.

​@@goodxpactually it's still small

​@@goodxp Don't just waste your work

​@@goodxpawesome work bro

I will increase it one more step on the next video when i am back from vacation. Thanks!!

Welcome 😊

It is a private repo. But I can make it public. Thanks for asking and thanks for the comment. I appreciate it. I will keep building it until it is complete.

I will paste the repo URL here for you.

github.com/afgonullu/afarukdev-nextjs it is made public. here you go. cheers.

@@goodxp thankyou !

well, first of all, thank you very much for your feedback. It is greatly appreciated. And I will definitely take action to resolve this. I increased the font size on VS Code already, but I can increase one more step. I hope that helps. Are you watching from desktop or mobile? I can see the code just fine on a desktop, but it can definitely be hard on mobile. Again, I am really thankful for your feedback. Check again on Monday and lets see if it is better. :)

​@@goodxp I am watching from desktop, and I was struggling to see the code, if you can improve that, it will be great. also consider being more clear and concise in your explanation. Keep going