I’ve been keen to get my teeth into another project recently, but was struggling with motivation to do any coding outside of work. This is obviously completely fine! I’ve learned my lesson on trying to do everything at once (although I do need reminders sometimes…)
Whilst Matt and I were on one of our daily walks recently, we got talking about Next.js and React (as you do as #techcouples 😂) our conversation inspired me to do this – rebuild my portfolio website, PaulineNarvas.com on Next.js.
I’ve had “clean up portfolio” on my todo list for a while, but I never actually got round to doing it. My recent craving to do some coding project and learning led me to just start!
So here we are.
Table of Contents
For a bit of background, my website was initially built in 2017 as I was trying to get it off the ground in time for my job search after university.
I had been teaching the “Introduction to Web Development” course with Code First: Girls for years so I decided to just go ahead with a simple HTML website, using CSS, a little bit of Javascript and good ‘ol Bootstrap. That’s all it really needed to be anyway!
As someone who did not do a Computer Science degree and ended up in tech, one of my key values is keep it as simple as possible. This is super important to me.
My site has gone through iterations since then. For example, I built a speaking page as my speaking “portfolio” started to grow and updated the site over time as I got involved in new projects.
Thanks for all the feedback everyone 😊 I made a few changes based on them – they’ve been super useful! (Especially from @jaredallard!) pic.twitter.com/4UzZFbem2d
— Pauline P. Narvas (@paulienuh) September 6, 2017
I’m not sure if it’s just me though – eventually I started to find scrolling through my large HTML file and CSS file quite exhausting whenever I wanted to change things. It felt bloated with Bootstrap and not to mention my code was just so messy.
I’ve been learning React and Next.js since last year (rebuilding Pawlean 2.0 and creating food-list at a hackathon) and I’m still amazed by how nice it is. So for this project, I decided to make the most out of my learning and re-develop my site with Next.js. With features like Static Generation for pre-rendering, I was hooked.
It was time for a rewrite… which brings me to the beauty that is Next.js!
I started where all great projects start… by creating a new repo – full of hope and promise! The next few weeks of development was going to be fun. If you’re interested, you can find the code to this project on my GitHub profile here.
When I first discovered the create-react-app one line command, I was blown away. It’s all well and great going through tutorials, but sometimes getting your hands dirty by playing around with the code is the best way to learn! It’s what helped me when I started learning.
Next.js also has a one line command that allows you to get started with your project straight away! As the documentation states, run npx create-next-app
on your command line. This is the fastest way to get started but you can also go through the manual setup if you’d prefer. https://nextjs.org/docs/getting-started
For my project, I’m using npm. So when I want to get a development build on my local machine, I run npm run dev
. I head over to http://localhost:3000 and my fresh Next.js app is ready to go!
When you first create your Next.js app, if you head over to your index.js file you’ll see some “welcome to Next.js” content which you can go ahead and remove and replace with your own stuff.
How about start with a simple heading that says “Hello World”? I recommend having your browser and code editor side by side as you’re developing, seeing the changes in real time without refreshing your browser is probably the coolest thing ever.
This _app.jsx file wasn’t in my folder initially, so I had to create it under /pages
. What is the _app.jsx file, you ask?
As stated in the Next.js documentation:
“Next.js uses the App
component to initialise pages. You can override it and control the page initialisation. Which allows you to do amazing things like:
The bit I was interested in was the persistent layout between pages. In my original design, I didn’t have a footer but I was warming up to having one with some social media icons.
My key objective in this whole rebuild was to use what I had learned about React and Next.js over the year or so and apply it!
I planned on transforming each section into components and anything is reusable making the most of the .map method that I picked up from different projects.
In terms of design, wanted to keep as much of the original design as possible.
Ok, I’ll take a break now 😂
— Pauline P. Narvas (@paulienuh) June 21, 2020
Optimising my images to webp format, cleaning up unused Javascript and CSS did the trick ✨ pic.twitter.com/f6r0kDV8DL
For those who don’t know:
“Vercel is a cloud platform for static sites and Serverless Functions that fits perfectly with your workflow. It enables developers to host Jamstack websites and web services that deploy instantly, scale automatically, and requires no supervision, all with no configuration.”
If you’ve ever played around with Heroku, that’s basically what Vercel is but better. The whole process of importing my “nextpn” repo from GitHub and “linking it up” was as smooth as my favourite peanut butter.
Every time I deployed new changes to master, it just worked. 👏 No headaches, no faffing around trying to fix configs…it just worked. As a developer, this is a dream!
I followed this well-written document on Vercel (gotta love good documentation) which clearly explained how I would add my Namecheap domain onto Vercel and what to do with my DNS records to point PaulineNarvas.com to my new and improved Next.js website.
I did experience a bit of delay getting the whole thing to switch (mostly because I’m impatient 😆) Clearing my cache and flushing my DNS helped speed up the process!
Overall, I had so much fun doing this rebuild project. There’s always no better feeling than building and shipping your own projects, it’s a rush that I can’t get over. Anyone else feel the same? 🙋🏻♀️
Especially when using modern tools that just work. Next.js and vercel did that for me and I can’t advocate giving this combo a go, it’s been a fantastic experience. 🔥
Let me know if you have any questions about anything I covered today, and have fun building 🛠
Leave a reply
0 comments