9
15 Comments

Why we migrated our Company Landing Page to Next.js

What?

I took a couple of hours to migrate our Company Landing Page to Next.js from CRA.

Why?

In short: SEO.

The full scoop: Also SEO but it's a bit more nuanced as I don't like to touch the codebase and spend time on refactoring/migrating something without a good reason.

So here are the reasons why we did it:

  • Ironically our Company landing page is the page with the highest "page rank" in ahrefs even tho we're not really actively promoting it like we do our products but we want to use eventual traffic to drive it to the products

  • We're gonna add a blog and content to the landing page where we share our learnings similar to what we have on IH

  • We've had a good experience doing a similar migration for another project that uses SEO as the main acquisition channel (see screenshot below)


Position improved slightly after migrating to Next.js (take with a grain of 🧂 like mentioned in last weeks article you can read here)

Takeaways 4 you

The obvious 🧐

  • CRA is not great for SEO
  • If you know SEO might be one of your channels down the line make sure that your stack can support it in a good way

The less obvious 😳

  • While it's "cool" to migrate to some shiny(er) tech, make sure there is a business reason, otherwise, you're just spinning your wheels (unless your aim is to learn, not run a business)

You?

Have you made experiences with Next.js? Where they good or bad? Let me know in the comments ❤️

Resources

If you're interested into more detail why next is good for SEO check out this article

    1. 1

      And the sound a raven makes 🤔😁

    2. 1

      Create React App, an easy way to get started with react -> https://create-react-app.dev/

  1. 2

    Good to know! I never try Next.js until now but i'll try for sure in the future!

  2. 1

    Is react-helmet not as good as Next.js SEO-wise?

    1. 1

      You're right that you can supply CRA with external libraries like React-Helmet there's probably no downside there in terms of SEO.

      But keep in mind that the meta tags, keywords, etc. are just a part of the whole SEO picture, it also needs to be able to crawl your page including content, and ideally, you don't have layout shifting too much, etc. and here is where next.js is much better for SEO as of right now because of the static or dynamic server-side rendering that sends back the full HTML instead of just an empty page that dynamically is put together on the client.

  3. 1

    I'm seeing more and more people using multiple sites for one company usually something like...
    www.mycompany.com -> nextjs, gatsby or other static site generator
    blog.mycompany.com -> Wordpress blog, or maybe static site with CMS
    app.mycompany.com -> Full dynamic site using whatever you are most comfortable developing in

    With google getting more and more opinionated about what constitutes 'loaded' with async loading and layout shift the extra work maintaining a couple of simple sites is less of a problem than trying to optimize your 'functional' site.

    1. 1

      Sure think having your app on a subdomain makes sense, they can be unrelated as most web apps probably don't need direct search hits as long as people find your landing page and you will most likely link to your app directly.

      I think instead of a subdomain for your blog it's probably better to have it as something like: https://www.mycompany.com/blog and you can use a reverse proxy for it instead of having to have it be the same site/app, subdomains afaik have SEO disadvantages:

      Check here for more info.

      1. 1

        has anybody used netlify proxies like this?

        1. 1

          I personally haven't but I found a ticket here so it seems possible.

          Another popular choice is nginx afaik 🤙

  4. 1

    Can you expand on what you mean by switching to nextjs for SEO? We used nextjs for our project, but mainly because it was simpler. We have pre-rendered pages so the load times are pretty fast, but just no way it compares to raw HTML/CSS.

    1. 2

      Sure.

      Some things are available out of the box like the <Head> tag, you can add that to CRA but you need to mix and match a bunch of libraries.

      Server side rendeding and static page generation are both good for crawling the page with a bot, google is working on getting this right but with a typical CRA app you have a lot of shifting layouts and when the page comes back it's basically empty (if you have a lot of dynamic content)

      For example, we use a CMS (sanity.io) if our pages have blog posts and the page is bascially empty when it first comes back.

      That being said afaik Google is working on improving their crawlers for SPAs and it already works a lot better than a couple of years ago but it's not 100% there just yet.

      Here is a good article that goes into more detail on this 💪

    2. 1

      I also added the article above because you're right I don't really explain that at all, the technical background was not the main target of this post but you're right it's pretty helpful 🤙

  5. 1

    One addition to Stefan’s post from me, one of his mates over at Niche Mates:

    After building several Next.JS apps (mostly landing pages with some more content inside), we decided to take some extra time and build a NextJS Boilerplate repo, that contains commonly used components, hooks, configurations for TailwindCSS and Sanity.io, ESLint and Prettier configs and lastly a basic CI setup with GitHub Actions.

    It has been a huge help, we already used it for three projects and hopefully for many more to come.

    If I had to guess, it roughly cuts development time in half and helps us not to forget any important parts in a new project (we have a checklist in the readme to keep track of all moving parts that need to be configured in a new project)

    1. 1

      Thanks for chiming in.

      To add to that we usually try to do things twice and then take a step back and take some time to extract common functionality in some sort of boilerplate repo, we also did this for CRA.

      The same goes for components that we write in one project, if we use them at least twice we throw them into the boilerplate repo.

      We have found this to be a good balance between:

      1. Building a component system from scratch for 2 weeks without launching
      2. Just copying things around and never take time to make something reusable

      We do this because we know it's important to balance short term and long term in a sustainable.

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 47 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 28 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments How I Launched FrontendEase 13 comments