The NextJS Journey
Sprinkle a little fairy dust over on the ole’ GitHub profile, mix up the LinkedIn profile with some spice, preparing to build my little freelance shop up again, and the roadmap is starting to come together in this next phase of things (more details to come soon).
But, I need to be a bit honest for a moment before diving into this actual post.
While I never quite “fell out of love” with programming at any point in my life, it is a fair assessment to say that it lost a bit of its luster over the past couple of years – but programming wasn’t to be blamed in full and complete honesty – it was 100% on me.
When you walk into a new job with a specific set of goals, and live by a mantra of “automate yourself out of a job” – sometimes you hit a wall; the engine is running so efficiently and so well, that you just feel like you’re going through the motions.
So the question became clear a few months back; do I change jobs, look for a new set of challenges, or do I stay where I am (with a team I actually love) and revamp the way we do things to be more prepared for the future?
The choice was clear; stay and “start over.”
NextJS Entered The Chat Room
While my day-job went through some serious changes behind the scenes, this was something I’d wanted to jump on for quite some time now (through old management into new management), but it was scary for folks – how does this work? How does it change the development pipeline? How does it affect processes, testing, time estimates, and the list goes on and on.
But it’s 2022, we have to stay nimble, we have to stay ahead of the curve, and most importantly, we have to provide our clients with the best possible websites and applications they can have – as they deserve it.
Going from PHP/Python eating the majority of my daily lines of code written and switching over to JavaScript primarily was a big shift, but man oh man, it’s been so worth it – sites we would have had running with Google Lighthouse scores around 20% in today’s tests are hitting 95% and above now; engagement is higher, conversions are higher, user experience is so much better, build processes just flow together as smooth as butter, and… I’m in love again.
The passion that was somewhat lost in routine was refreshed and brought back to life; the excitement that arises with a new build, an excited client with the experience of their new sites, the better rankings, it’s just all so wonderful.
But, and there is always a but, I can’t even explain how excited I was this week while watching the NextJS 2022 Conference – seeing everything new whether it be layouts, data fetching, server side components, more optimized build tools (I see you Turbopack) – it just made me feel like the old days when watching an Apple conference and getting excited.
Rehacker, the NextJS Hacker News Clone
With all of that out of the way though, NextJS 13 is not ready for production in my opinion, but the start of some serious changes in the way you build sites is coming – and I want to start working this into my builds and processes.
To help with this, I built something super simple; Rehacker (Tailwind + NextJS 13). It’s nothing fancy at all, but it shows off the basics of fetching data, routing dynamic URLs, using the new `use` logic from React, new `HEAD` logic for SEO, caching, and more.
Links:
It’s nothing fancy, but it’s a solid way to take a look at something simple and understand the changes; where or how would I fetch data via client/server side components? How would I make `[slug].js` within the new configuration? How would I use the new `layout.js` and implement my design?
It’s all there – so, don’t go in thinking it’s the next greatest thing since sliced bread, but it’s a great live example of it all working together.
To give a basic overview, take a look at the following three folders after cloning (or while looking within GitHub):
app
components
lib
`app` is the newest addition to NextJS (see this page for more information) which contains server side functions; this includes the major changes to the builds such as how to handle site wide / section specific layouts, fetching data server side, caching data, etc. `components` and `lib` are just a personal preference for organizing code; these include small reusable pieces of code from the site along with data calls to the HackerNews API.
Important Note: If you’ve used NextJS before, or have existing builds (such as this site), your `pages` folder will still work for the time being. The `app` folder is not required.
I plan to write (code, projects, and tutorials), a lot – I’m starting to love this idea of “build in public” mindset where you build, write, and learn/teach as you’re moving forward.
With this site, and with my own personal goals, you’re going to start seeing a great deal of NextJS, Rust, Tailwind, Typescript, headless, etc topics start to popup.
For now though, please feel free to fork the repo, make/suggest changes, let me know ideas on how to better use newer functions/features, and until next time – have an amazing day.