In this post, I’ll discuss why I decided to rewrite my website using Next.js, the considerations to keep in mind when converting a website from React to Next.js.

Why I converted this website to Next.js

I was facing significant issues with SEO (Search Engine Optimization) on my website because it was built with React. After doing some research, I concluded that the best way to improve SEO was to switch to a framework that supports SSR (Server-Side Rendering). Many resources recommended Next.js as the ideal solution.

React vs Next.js

When converting a React application to Next.js, especially when considering server-side rendering (SSR), there are several important factors to consider:

Routing

React typically uses React Router for client-side routing. You simply do this:

<Router>
 <Routes>
   <Route path="/" exact element={<Home />}/>
   <Route path="/about" element={<About />} />
   <Route path="/contact" element={<Contact />} />
   <Route path="/blog/:id" element={<Blog />} />    <-- Dynamic Route
 </Routes>
</Router>

Next.js has a file-based routing system, where each file in the pages directory automatically becomes a route. And it looks like this:

app
├── about
│  └── page.jsx
├── blog
│  ├── [route] <-- Dynamic route
│  │  ├── loading.jsx
│  │  └── page.jsx
│  ├── loading.jsx
│  └── page.jsx
├── layout.jsx
├── loading.jsx
├── page.jsx

React Hooks

it’s important to note that React hooks like useState,useEffect, and useContext only work in client-side components. If you need to specify a component as client-side in Next.js, you simply insert 'use client' at the very beginning of the file.

SEO & Performance

One of the reasons why Next.js is better than React for SEO is simply because Next.js uses SSR (Server-Side Rendering). So, how does this differ? In React, the HTML is generated on the client side after the JavaScript has loaded. As a result, meta tags and other SEO relevant elements are also added after the page loads. This can be problematic for SEO because search engine bots may not execute JavaScript and therefore might miss these tags. However, Next.js pre renders the HTML on the server before sending it to the client. This means that the meta tags and other content are already present in the HTML when the page is delivered to the browser.

Additionally, I was amazed by the Image component in Next.js and its capabilities. It offers so much that it would take too long to explain everything here. You can explore more to see what it offers here.

Conclusion

Next.js offers many benefits for full-stack websites, such as loading skeletons, advanced image optimization, and excellent documentation. However, I did encounter some challenges with certain client-side libraries, where the errors were unclear and required extensive debugging to identify and resolve.

In my opinion, if you're building a website where SEO isn't a priority and there’s a lot of client-side engagement, such as animations, React is a great choice. Otherwise, Next.js is the way to go. Additionally, Next.js support full-stack development, but I haven’t explored it yet (maybe that will be my next project).

Good luck :)