A couple of weeks ago, I finished and deployed the frontend for this blog you’re on right now. Until very recently, this was a standard create-react-app. You can see my source code here.

I was pumped to share my first blog post last week, I want to say a big thanks to all of you who supported me and checked it out! But as soon as I went to share my article on LinkedIn and Twitter, I noticed a couple of big problems that forced me to re-write my React app in Next.JS.

Why Server Side Rendering

If you already know the benefits of Next.JS and SSR, feel free to skip to How.

Search Engine Optimization (SEO)

One of the best ways to get people onto your website is to optimize it for search engines like Google.

React struggles with this since it creates a single page application (SPA). Google’s bots don’t have a great time with SPAs. That’s because the HTML they depend on is pretty empty until JavaScript fills out the page. Your web page will be Client Side Rendered (CSR). It’s rendered in your browser by some JavaScript executed by the browser.

Until then, it’s an empty page and bots won’t be able to figure out what your page is about. There is an alternative that keeps the bots happy though.

Server Side Rendering (SSR), is when that same empty HTML document is filled out by the server before being sent over to your browser. Bots love this because they no longer see an empty page and instead can get an idea of what your page is about.

Now that was a quick rundown so if you still have some questions, check out this short video.

Social Sharing

When you share your web page on a platform like LinkedIn, you want LinkedIn’s bot to have an easy time reading your web page. With a React SPA, it’s not so easy for their bot.

But, if you made it easy because you use SSR and a couple <meta> tags in the head of your HTML, they’ll generate a nice and pretty link preview card for you. More people will click your link ๐ŸŽ‰ if it’s complete with an image and title of what they’re about to click on.

LinkedIn link preview card

Now, SSR will allow the bot to read what’s on the page, but it needs a little bit more help to know exactly what to put in your preview card.

That’s why you need those <meta> tags mentioned earlier. There’s a lot of tags you might need but the two most important ones look like this:

og:title and og:image meta tags

You can check how your website’s links will show up on a few social sites with this app.

How to Convert to Next.JS

So, you’ve decided you want your website showing up on Google and you like how your links will look on LinkedIn. Great, let’s convert that React Client Side Rendered app of yours to a Next.JS Server Side Rendered app ๐Ÿš€!

Disclaimer: Next.JS is not your only option! Gatsby is a great alternative and there are plenty of others. I decided to use Next.JS since it’s a little more established.

Getting Started

The easiest way to do this conversion is to create a fresh Next.JS app. Once we’ve patched together our old React code with our new Next.JS functionality, we’ll simply update GitHub with this new project. I’ll also be showing you how I deployed my Next.JS app to Netlify in my next post, so stay tuned for that on LinkedIn and Twitter.

Run:
npm init next-app

You can use npm run dev and visit your app at localhost:3000.

If you get stuck at any point, the Next.JS docs are great. You can also check out my repository to see my implementation.

Since Next.JS is basically SSR on top of React, you can reuse almost all of your old code! There’s going to be a few differences though. Let’s start with routing.

Routing

Once your project is initialized, you’ll notice an important directory called pages. Next.JS will automatically handle routing for you using this directory, so you can say goodbye to React Router.

As long as you orchestrate your directory structure with your desired URL paths, you’ll be fine. For example, my directory structure looks like this:

My Next.JS /pages/ directory structure

That structure corresponds to the following routes.

  • mysite.com will render pages/index.js.
  • mysite.com/blog will render pages/blog/index.js.
  • mysite.com/blog/my-article will render pages/blog/[slug].js and pass the prop {slug: "my-article"} to the component.

Now that last page name looks a bit strange. Essentially, [slug].js (that is the actual name) will match a dynamic route. It will match any path after blog/... and pass the slug from the URL to your component as a prop. It can also be called [id].js or anything else, then your component will receive a prop like {id: "my-article} instead of {slug: "my-article"}.

_app.js is a unique Next.JS file. You can import global CSS in there and add components like a navbar or a footer if you want them on each page. More on that here.

Navigation

You can navigate between these pages using a classic <a href="#"> tag, but you can also use the Link component from Next.JS if you still want some client side rendered navigation.

For example, to go to the blog’s index.js page, you simply add a link with:
<a href="/blog">blog</a>


To navigate to a blog post — your href can be dynamic — you might have:
<a href={post.slug}>{post.title}</a>

To get some optimization with dynamic routing, Next.JS offers getStaticPaths and getStaticProps. I’m using them in my project so you can see how I used them in [slug].js here.

This isn’t necessary though, it’s building all of the HTML documents during build time. So it will build the posts page, it will also render and export 50 HTML documents for my blog posts if I had 50 blog posts. All of this happens at build time so the browser doesn’t need to make requests to your backend each time a user checks out a blog post.

Components

For your smaller components that don’t need their own page (maybe you have a <Card /> component you re-use), you can simply copy & paste them over from your old project and stick them in a /components directory. Then you just have to fix all your imports.

Images

For images, you’ll need a module called next-images. This will allow you to import images just like you did with your old create-react-app.

CSS/SCSS

If you need component specific CSS, you need to change your file names to be consistent with mycss.module.css. Next.JS will throw an error if you don’t include module in the name.

With component specific CSS, you’ll have to treat your styling as an object in your JSX. i.e.

importing a component specific class and applying the navbar class.

If you don’t care for that, you can import global CSS in _app.js and the classes will be available in any component or page using the className="my-class" prop.

If you love SCSS like me, simply npm i sass (npm link here) and Next.JS will support it no problem.

<Head> Component

Next.JS’s <Head> component is crucial to good SEO and it’s also where you can define those og:image and og:title meta tags we talked about earlier.

You want to stick this component in each of your pages to help bots figure out what each page is about and also to define things like the page title or the favicon. Below is an example of the head I use for my blog post page.

My <Head> from [slug].js

Git

Finally, once you have all the errors smoothed out and all your imports are in place, you can update your git repository. The easiest way is to:

  1. Create a backup branch for your old react project
    git checkout -b react-backup
  2. (Optional) update your remote server
    git push -u origin react-backup
  3. Switch back to your master branch or create a next branch and merge it after
    git checkout master
  4. Remove everything from your original React project except for .gitignore and the .git directory
  5. Copy paste over your new Next.JS project to that now empty directory
  6. Always ensure everything is still working! Run npm run dev and test all your routes are working
  7. Add .next to your .gitignore
  8. Once everything is working as expected
    git add . && git commit -m "convert to NextJS ๐ŸŽ‰"
  9. Now you can push that branch with git push -u origin next
  10. Or merge into master when ready
    git checkout master && git merge next

Conclusion

That wraps up my first guide, I hope it was helpful and thanks for making it all the way down here! If you’re wondering how to actually deploy this, I’ll be bringing a how to deploy Next.JS to Netlify in my next post so stick around for that.