---
title: Why I've switched from WordPress to Next.js to create my personal website?
date: '2022-06-02'
tags: ['Story', 'Next-js', 'WordPress', 'WebSite']
draft: false
images: ['/static/images/from-wp-to-nextjs.jpg', '/static/images/from-wp-to-nextjs.jpg']
summary: 'In the middle of 2021, I did some research to do a redesign of my personal website. This one was starting to get pretty old...'
---

<Image
  alt={`From WordPress to Nextjs`}
  src={`/static/images/wp-nextjs/from-wp-to-nextjs.jpg`}
  width={1920 / 2}
  height={1080 / 2}
  priority
/>

In the middle of 2021, I did some research to do a redesign of my personal website. This one was starting to get pretty old, I had created it in 2019 during my search for an apprenticeship contract in an effort to stand out from the crowd. It was built on the most used and popular CMS in the world: [WordPress](https://wordpress.org/). It was running on one of the most popular themes: [Divi](https://www.elegantthemes.com/) from **Elegant Theme**. As a Divi fan, I found that it didn't really fit me anymore and I was looking for a **new challenge**.

## How I discovered Next.js?

During the research I came across many **inspiring personal websites** and these websites had one thing in common:

- Fluidity and speed of execution
- Minimalist design

They also had another thing in common, they were running on [Next.js](https://nextjs.org), a framework based on [React](https://reactjs.org/). During my research I also found that they were very efficient from an SEO point of view. Google with its Page Lighthouse module rates almost all sites based on Next.js with scores between 90 and 100 in the 4 different rating criteria.

Here is a list of my favorite portfolios & personal websites:

- [Brian Lovin](https://brianlovin.com/)
- [Nev Flynn](https://nevflynn.com/)
- [Rauno](https://rauno.me/)
- [Marc Bouchenoire](https://marcbouchenoire.com/)
- [Lee Rob](https://leerob.io/)

### Here is a comparison of my old site vs the new one:

<Image
  alt={`Google Lighthouse camparison`}
  src={`/static/images/wp-nextjs/google-lighthouse-wordpress-vs-next.jpg`}
  width={1920 / 2}
  height={1080 / 2}
  priority
/>

## How did I learn the basics of JavaScript and Next?

As mentioned above, I've been working on WordPress for **more than 6 years now**, so I've been a low-code user. But in any case I was able to acquire good technical bases with the use of HTML and CSS.

I still had to learn more about Nextjs, I naturally trained myself with the resources available on the **Next website**. There's a pretty good [tutorial](https://nextjs.org/learn/foundations/about-nextjs) to build your first application with **Next**. The tutorial covers the basics, such as **HTML, CSS and JavaScript**.

Afterwards I also discovered that Next was followed by a large community of developers. It also allows to ask for advices and to receive good practices. While exploring the many themes of the community, I came across a very promising template : [Tailwind nextjs starter blog template](https://github.com/timlrx/tailwind-nextjs-starter-blog) from [`@timlrx`](https://github.com/timlrx).

I really appreciated this sharing of information in a very transparent way. It allows everyone to **start a project on Nextjs** without being an _experienced developer_. On the other hand I think that you still need some essential soft skills:

- Be curious and open minded
- Not to be afraid to turn in circles
- Know how to handle unknown problems

## Free hosting with Vercel.

Another interesting feature with Nextjs is the possibility to host your website on [Vercel](https://vercel.com) for **free**. Indeed, Vercel offers **free hosting** for non-commercial & hobby sites.

## Final word.

Any good marketer needs to be curious and open-minded. Learning the basics of Nextjs and JavaScript coding will undoubtedly benefit me all along my career.

Especially on these 3 aspects:

- Work more efficiently with technical teams and especially know how to clearly express expectations and needs during a complex project.
- Have a much more user-centered vision.
- Improve my ability to solve problems and be more persistent in my work.

## Tools used for the creation of the website:

- 🤖 **Made** with [Next.js](https://nextjs.org/) and based on the [Tailwind Nextjs starter Blog](https://github.com/timlrx/tailwind-nextjs-starter-blog) template. [Repo](https://github.com/timlrx/tailwind-nextjs-starter-blog)
- 🎨 **Styling** with [Tailwind CSS](https://tailwindcss.com)
- 💾 **Hosted** by [Vercel](https://vercel.com)
- 📝 **Writing** articles with [MDX](https://mdxjs.com/)

### Here are the next features:

- [ ] Multi-language Support

  - [x] English
  - [ ] French

- [ ] Adding Spotify API Get Currently Playing Track

---
