OMG - My First Try with Next.js

cooney.com.au has been in existence since 2003.

I've owned the domain since my early Internet days and finally secured the expired domain name in the early 2000s.

Back in the day, I tested out Joomla (Is this still a thing?), then went with Drupal for several months. Drupal was an utter pain in the ass, to be honest.

And then settled on Wordpress which, at the time, was the go-to CMS, used by all the current online marketers. Wordpress' strength was with it's vast installable plugins. Sadly, plugins were Wordpress' weakness since all plugin coders disabled error messages so crap-coding was the order of the day.

Still, Wordpress was extremely easy to use and deploy.

Enter the New Era

For the last few years, Google has been pushing hard to make the Internet and websites more enjoyable for end-users.

Currently, this mainly revolves around site speed and user-experience.

Being built on PHP, Wordpress' plugin-heavy architecture is no match for emerging (and feature-rich) technologies.

Which is where Next.JS, React and Vercel now come into play.

Scary Stuff

I haven't done any real coding since assembly language, back in the Z80 days. So the thought of 'new-wave' Javascript had me procrastinating and I mean a lot.

It just so happened our business was looking at using TailWindCSS within all our listed sites at RomancesGroup and I got to thinking of this site again.

TailWindCSS takes all the pain out of CSS. It's used extensively now by many large business including the likes of NetFlix.

So here's where I started.

Watch these YouTube videos as I did:-

The above 'Introducing Tailwind CC v3.0) video demonstrates the power TailWind provides.

SimonSwiss is a great YouTuber too. He is clear and concise in all explanations and has an easy to watch personality.

In this 'Rebuilding Jamon's homepage with TailWind CSS' video, Simon shows just how easy it is to migrate an existing static website into the TailWindCSS and Next.JS technologies.

I have to admit, this was the convincing video for me to get my ass moving and migrate cooney.com.au into Next.JS. You can see portions I've re-used until I learn more.

Traversy Media has put a lot of effort into this one.

In conjunction with migration video, I used this 'Static Blog With Next.js and Markdown' video to plunge into VSCode and GitHub to get some real website code under way.

What Stumbling Blocks?

As of writing this, I started on this reconstruction journey less than a week ago. So the process has been a learning curve into the unknown.

I'd never used GitHub before so I stumbled a little with that. Not scary though, just do some Googling as I did. My initial mistake was making a parent folder and adding the GitHub repository under it - and then opening the parent. That messed up my GitHub/Vercel deployment.

TailWindCSS has a few gotchas, for the uninitiated too.

  content: ["./pages/**/*.{html,js}", "./components/**/*.{html,js}"],

I eventually worked out I'd forgotten to add the 'components' section into the tailwind.config.js file so it could look and manipulate styling into Next components which I created during the previously mentioned YouTube videos.

More stumbling but was refreshing when I eventually tweaked to my newbie error.

The thing is, don't let all this new tech put you off.

DS.Store Madness

Yet another glitch was the blog page 'cards'.

While I got this part working without too much incident, I initially couldn't work out was I was getting a blank card appearing.

And hovering on the card, it was pointing to a DS.Store URL parameter. Weird indeed.

DS.Store, incidentally, is a macOS hidden file used to store various Finder properties.

Well, if you've stumbled onto this blog post for an answer then here it is.

My best guess is I created my 'posts' directory using Finder and not creating it using VSCode.

My solution which worked was copying the directory and .md files out to another location. That killed all the cards but all good.

A recreated the folder from within VSCode and then dragged the .md files from a Finder window onto the newly created VSCode directory, within VSCode.

Viola! No more blank blog card.

What's Left To Do?

Well, there's heaps since I've really only got a week's worth of Javascript experience.

• I need to complete the other parts of the site but want to work out how to use a Markdown file to write the content and have it's content appear as the page content, with TailWind styling. It's the import code that on the list. Maybe later for this. Low priority at the moment.

• and figure out doing responsive insertion of YouTube videos in my Markdown posts (done).

• Then there's the Connect/Contact page to do.

• Thinking to add SEO and sitemaps into Next build will be useful for Google to see and recommend to other users is on the list. OK, added the Next.JS SEO plugin from 'garmeeh' - and Sitemap plugin from iamvishnusankar

• Add the site to Google Webmaster Tools. For me, the easiest was to verify with a HTML file. Download, drag to the 'public' folder, and verify. Done!

• And add some Social Share buttons should be on my long list.

• Plus do a deep-dive into re-styling the entire site 'look and feel' since it's in a bare-bones state. There's nothing sexy about it, at all lol

Add a Comment - Easy To do

• Did you find any part of this post interesting?
• Did anything help you understand the experience?
• Did you have any of the same issues?

Tell me in the comments below.