In this tutorial, we will be discussing my weird journey to Next.js, a popular React framework for building dynamic web applications. I will be sharing my experiences, challenges, and learnings along the way, in the hope that it will help others who are also looking to delve into the world of Next.js.
Background
I have been working as a front-end developer for a few years now, primarily using React for building web applications. I have always been curious about Next.js and its capabilities, but for some reason, I never got around to exploring it until recently.
Getting Started
My journey began with a simple Google search on "Next.js tutorial" to get started. I found the official Next.js documentation to be quite comprehensive and easy to follow. I started by installing Next.js using npx create-next-app my-app, which set up a new Next.js project for me.
Initial Impressions
My first impressions of Next.js were quite positive. The project structure was well-organized, and the out-of-the-box features such as file-based routing, CSS modules, and API routes were impressive. I was able to get a basic application up and running in a matter of minutes.
Challenges
As I started delving deeper into Next.js, I encountered a few challenges along the way. One of the main challenges I faced was understanding server-side rendering (SSR) and static site generation (SSG) in Next.js. Coming from a background of building client-side applications, it was a bit tricky to wrap my head around the concept of rendering pages on the server and generating static HTML files.
Learning Curve
Despite the initial challenges, I found that the learning curve of Next.js was not as steep as I had anticipated. The official documentation and community resources were incredibly helpful in guiding me through the learning process. I also used online tutorials and resources such as YouTube videos and blog posts to further my understanding of Next.js.
Advanced Features
As I got more comfortable with Next.js, I started exploring some of the more advanced features such as data fetching, authentication, and optimizing performance. Next.js has built-in features such as getServerSideProps and getStaticProps for fetching data, which made data fetching a breeze. Integrating authentication using libraries like NextAuth.js was also straightforward and well-documented.
Deployment
Once I had built and tested my Next.js application locally, I needed to deploy it to a production environment. I decided to use Vercel, the creators of Next.js, for deployment. Vercel provides seamless integration with Next.js, making the deployment process as simple as pushing my code to a Git repository.
Conclusion
My journey to Next.js has been a rollercoaster of learning, experimentation, and growth. I have come to appreciate the power and flexibility of Next.js for building modern web applications. While there were challenges along the way, the rewarding feeling of seeing a fully-functional Next.js application come to life made it all worth it.
I hope this tutorial has given you some insight into my weird journey to Next.js and has inspired you to embark on your own adventure with this amazing framework. Remember, the key to mastering Next.js lies in practice, experimentation, and never giving up in the face of challenges. Happy coding!
Thanks for the entire backstory of you got into next.js i can see why people call you a shill but it truly seems like you care about the framework and it solved your problem, i think the big disconnect at the moment is that the big shift from pages to app router shook up the entire paradigm for most devs and it there is a level of uncertainty right now in the community, devs also feel like if they learn next.js now will they change it again in the future.
Entering the job market as a Junior in 2023, this video just sends me into a rage. "I had no real experience and got a contract at Twitch because we liked the same music."
Ok, i just started with the backend and with next but I can feel the love here
It's very cool seeing the old project; it brings back memories. Seeing a snapshot of old projects is always interesting to me. At the time, I think the Vercel CLI was okay. I felt like it was more convenient than running an Express JS, Fastify, or Hapi.js server, especially if I was going to be pushing to Vercel and, like you, use Cloudflare, etc.
3:33 Firing is good for everyone, the team gets to feel like they are trimming fat and the person fired gets to hopefully move to a better position and realize they needed the kick in the ass to get better and switch things up, which in tech typically leads to a better fit in position or more money, or both. I am a big fan of not taking firings too seriously and looking at them as opportunities. I've only been "let go" once but I've been part of layoffs that felt an aweful lot like firing. Not sure why I went on this rant, but it's good to hear.
I am very disappointed by their docs, it comes nowhere close to the react docs.
thx for 80% water in the video
it's funny how bad comunication because of team not working on the same timezone leads to ping pong and then to "i am just going to write another layer between frontend and backend"
If someone could just write an extension to summarize Theo videos that would be good business 🙂
What stands out here is your passion for webdev. Don't worry about what other people think, they just wish they were you and actually loved their lives. You just keep going because your passion, your dedication and your work ethic are something that one cannot buy. You have it or you don't. And you have it. And, yeah, Vercel should pay you more. If they don't, they are totally using you. Keep your head up And well done!!!!
too many side chicks… who is ur real girl man?
Agree. You're a good entertainer.
I had this idea to make a intraNet for my company and started messing around with next.js.I started testing random ideas, like what will happen if i do it this way or that way, or will this or that work, and i have to say that i am amazed at what next.js can do. I use next.js with mongodb and JS with no TS so i can try anything that comes to mind and the app rarely brakes.
now you get paid by nextjs also
I still hate Next.js 😅 Then I found Nuxt and it's the bomb 💣
How do you make them move over is my question??? I’m still constantly fighting about why Tailwind isn’t the devil to no avail. 😢
Genuine question, folks having issues with next caching, can you describe the scenarios or examples and how did you manage to overcome it?
I'm shaking the mouse and shaking the mouse, but I'm not on that computer… trying to control Theo's cursor fullscreen lol.
I like NextJS; however, it's very noticeable how they do not pay attention to their "output: export" issues on GitHub. There are tons of issues, especially with regards to dynamic routes, even though they state they should work with dynamicParams: true and generateStaticParams(). Just try to run their own Nextgram example with output export. It won't work. I like NextJS more than plain React, but unlike you, I need and want to run self-hosted. Now, I'm fully aware that NextJS can be run fully self-hosted; that's super awesome. However, my API/backend needs to scale much faster than my frontend, and as far as I know, I can't "just" run Next's API when scaling horizontally (if I'm wrong, please educate me; that would probably make me drop NestJS). Because of this requirement and my appreciation for the NextJS features over React, I still use them for static site generation. And I feel like it's a shame they are dropping the ball on this.
i used astro. it uses vite not webpack. why did next not go to vite too? its kinda the standard these days. so much easier to configure.