Skip to content

Latest commit

 

History

History
91 lines (62 loc) · 4.67 KB

from-wordpress-to-nextjs.mdx

File metadata and controls

91 lines (62 loc) · 4.67 KB
Raw
title date tags draft images summary
Why I've switched from WordPress to Next.js to create my personal website?
2022-06-02
Story
Next-js
WordPress
WebSite
false
/static/images/from-wp-to-nextjs.jpg
/static/images/from-wp-to-nextjs.jpg
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. It was running on one of the most popular themes: Divi 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, a framework based on React. 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:

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 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 from @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 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:

Here are the next features:

  • [ ] Multi-language Support

    • [x] English
    • [ ] French

  • [ ] Adding Spotify API Get Currently Playing Track