Forem: Austin Shelby

What Is Next.js And Why Developers Love It

Austin Shelby — Tue, 19 Jul 2022 11:07:59 +0000

Next.js is a web development framework used by companies of all sizes to build websites that are secure, scalable, and quick to build.

This article is for developers who are already familiar with React and want to have a deep dive into the pros and cons of Next.js and for businesses looking to evaluate new technologies to use in their organization.

We will be covering the main features and benefits of Next.js and for what kinds of websites it is best suited. You will learn what companies use Next.js in production and how it has treated them so far.

By the end of this article, you will have the necessary knowledge to decide if Next.js is the correct tool to build your next website project and how you can get started.

What is Next.js
- Static site generation
- Server-side rendering
- Incremental static regeneration
- Client-side rendering
What makes Next.js unique?
What kinds of websites is Next.js best suited for?
Who uses Next.js
- Backlinko
- Hulu
Pros of Next.js
Cons of Next.js
How to start a new Next.js project
- Page Routing
- Rendering Pages
- Deploying Next.js
Conclusion

What is Next.js

Next.js is a React based web development framework that works both as a front-end and a back-end. It allows developers to easily build fully fledged websites—saving time and effort.

The main selling point of Next.js is the ability to choose a different page rendering method for each page—server-side, static, client-side, incremental static regeneration, or on-demand revalidation. This flexibility makes Next.js suitable for most kinds of websites.

Next.js provides an amazing developer experience with features like TypeScript and ESLing integrations and fast refreshing when developing your website. When deployed, Next.js does automatic compiling, bundling and minifying.

Compared to React you don’t have to worry about using bundlers like Webpack and Babel or production optimizations such as code splitting.

Next.js does all of this boring stuff automatically so you can focus on building the actual business logic of your application.

Let’s take a look at all of the different rendering methods provided by Next.js and see where they might be the most useful.

Static site generation

Next.js provides the ability to render your pages at build time—making them faster and more secure. Static pages can be served from a content delivery network(CDN) uncovering numerous benefits.

Pages loaded from a CDN are available from multiple different locations around the world giving users the least amount of latency when loading a page.

Because there is no server, the exposed attack surface is much smaller, leading to more resilient and secure websites.

Static sites are dead simple to deploy and fortunately the most cost-efficient too.

The downside is that the content on the website will stay the same before the next build of the website which can take anywhere from a few seconds to over ten minutes depending on the size of your website.

Server-side rendering

The exact opposite of static site generation is server-side rendering. Instead of rendering the page at build time, pages are now rendered on-demand on the server whenever users request them. This might sound great at first as users get the freshest possible data possible but there are some drawbacks that you should be aware of.

As you might have guessed, serving a server-side rendered page takes a lot more time than serving a static page. And the fact that the server has to do this for every single page request it gets the time starts to add up.

Next.js is notoriously slow when doing server-side rendering so you will have to think if it fits your use case.

Server-side rendering happens on the server (as the name suggests). Users who are physically far away from this server have increased latency.

To decrease latency you need to have more servers around the world—increasing costs and complexity.

To alleviate these drawbacks, Next.js can be deployed into a serverless environment.

A serverless environment is very similar to a CDN except instead of just serving static files, these distributed endpoints can also run code for purposes such as server-side rendering. This might help reduce latency, but there is another huge drawback that you need to be aware of.

Serverless functions have notoriously long wake-up times. This means that if a serverless function endpoint hasn’t been requested in a while it goes to sleep so to say. Any new request then has to wake it up which might take several seconds.

No, that wasn’t a joke. Doing server-side rendering with Next.js in a serverless environment might increase your page load times to several seconds. I have seen some Next.js sites deployed to Vercel take up to 5 seconds to load.

The fastest way to do server-side rendering is by using a server instead of a serverless environment.

Incremental static regeneration

Incremental static regeneration or ISR for short is a hybrid of static site generation and server-side rendering. It allows you to statically generate your pages but also generate updated versions of them periodically.

It also allows you to statically render your pages on-demand and not on build time.

This technique allows you to only generate a subset of your website’s pages, and then the rest on-demand whenever users request them.

Your build times will be a lot shorter but you will still get to enjoy the benefits of static site generation, the best of both worlds.

Client-side rendering

Client-side rendering is what you do when using React, but even in Next.js apps, it has its purpose.

If you want to have ultra-fast page loads but still have dynamic data, client-side rendering might be the option for you.

What makes Next.js unique?

Next.js has gathered a lot of buzz around tech communities as it makes building highly customizable websites easy.

Next.js cleverly abstracts the data loading methods into their own serverless or server functions making loading data into your pages incredibly simple. This simplifies your website architecture significantly.

Unlike in traditional React applications, with Next.js you can query your CMS or a database directly on your pages.

This makes having a proxy backend service redundant. Next.js developers can focus on integrating the frontend with their preferred data source without worrying too much about backend web development.

Next.js comes out of the box with a ton of utilities used in common web applications.

Dynamic page routes, redirects, rewrites, middlewares, and i18n are just some of the things that make Next.js such a great solution.

With these utilities, developers can build features that will help businesses with their goals.

Marketers will love the A/B content split testing and autonomy to create pages through a CMS.

Search engine optimizers will love the fast page load speed and fully customizable metadata such as Open Graph tags and structured data.

Developers love the freedom to create new features using all the tools that come with the React ecosystem.

What kinds of websites is Next.js best suited for?

The multiple different rendering methods, dynamic routes, and the ease of fetching data in your pages make it possible to build all kinds of websites with Next.js.

Next.js is most commonly used to build content-driven websites such as corporate blogs, customer portals, documentation sites, and e-commerce stores.

There are a few things that you need to keep in mind though.

Next.js API routes can handle simple JSON requests but if you need anything more advanced such as webhooks or server-sent events you will have to look elsewhere.

Who uses Next.js

Next.js is used by everyone from hobby programmers to Fortune 500 companies.

Every day more and more companies are moving to Next.js for its performance and developer experience.

Backlinko

One of the most prominent SEO blogs out there, Backlinko, was struggling with severe performance issues.

Their old WordPress website wasn’t cutting it in 2021 so they decided to do a complete rebuild with Next.js while still keeping all of their data in WordPress.

This solution worked perfectly as their new website loads three times faster.

Backlinko is a great case of how updating your old website into Next.js can bring great performance benefits which will affect your site’s SEO.

Hulu

One of the global leading TV and movie streaming platforms, Hulu has big stakes on the line when it comes to its website.

One of the main requirements for Hulu was the ability of server-side rendering. Next.js made implementing this requirement incredibly easy for them.

The automatic code splitting by Next.js allowed the team at Hulu to implement features that didn’t slow the website down.

Thanks to Next.js Hulu now enjoys fewer bugs and increased developer productivity.

Hulu is a great example of how Next.js can handle even the most critical requirements.

Pros of Next.js

So far we have talked about who is using Next.js and what their reasons are. Let’s break it all down.

Next.js allows you to build full-fledged web applications thanks to its already large set of internal functionality and the massive library of third-party tools.

These third-party tools allow you to quickly and easily implement common features such as:

Authentication with next-auth
Search engine optimization with next-seo
Type-safe API routes with trpc

Other than Next.js specific packages, you get to use all React packages as well.

These will speed up development time drastically and decrease your time to market.

The static rendering methods allow you to take full advantage of SEO, especially if you are doing client-side rendering currently.

Rendering your pages statically allows you to say goodbye to traditional servers and enjoy the additional speed, scalability, and security that CDNs bring.

Now it is important to understand that Next.js is just a tool. It won’t magically make your website rank super high on search engines or increase your sales—like some other agencies are advertising.

I’m all about giving you a holistic view of things without selling you snake oil.

Let’s take a look at why you shouldn’t use Next.js.

Cons of Next.js

Next.js is not all sunshine and roses and there are some drawbacks that you should be aware of.

Unlike most full-stack frameworks like Django, Spring, or Rails—Next.js hasn’t matured that much yet.

What I mean is that certain things that should be simple, are not.

There are not that many agreed-upon patterns on how you should build your web application which leads to a lot of guesswork and mistakes.

That’s why Next.js is recommended to developers who already have experience with building full-stack web applications because they know what to look out for.

Things that are not working well are:

Testing
Authentication
Databases

Next.js provides a lot of choices on which direction to take your project, but with this abundance of choice comes big responsibility.

It is easy to take a Next.js project in the wrong direction if you don’t know what you are doing.

There are a lot of weird kinks in Next.js that only seasoned pros know about. Things such as:

No default locale prefix
A lot of things will opt you out of full static generation
Performance issues server-side rendering

If you want to take Next.js for a test run I’m going to give you the instructions on how to get started in just a few minutes.

How to start a new Next.js project

To start a new Next.js project you need to have Node.js installed on your computer.

Create a new Next.js project with npx

npx create-next-app@latest

This is going to bring up a wizard that will guide you through the creation of the project.

Next.js will automatically set you up for a good start by creating the recommended folder structure and useful scripts to run your application.

The page in the location pages/index.jsx is mapped to / in your website.

Run the command npm run dev to start your development server and visit http://localhost:3000 to view your application running.

Feel free to change the contents inside pages/index.jsx file to see it change in real-time.

Page routing

To see Next.js’s page routing in action create a file called about.jsx inside the pages/ folder.

This file will map to /about in your application.

Fill the file with this code to create a simple page:

const AboutPage = () => {
  return <div>Hello World</div>;
};

export default AboutPage;

Rendering pages

The default behavior of Next.js is to pre-render every page. This is the most optimal way to render your web application.

Let’s see how we can load some data on our about page.

To keep our pre-rendering we need to use the static data fetching method getStaticProps.

Change the contents of the about page to fetch the latest daily cat facts:

const AboutPage = ({ facts }) => {
  return (
    <ul>
      {facts.map(({ _id, text }) => (
        <li key={_id}>{text}</li>
      ))}
    </ul>
  );
};

export const getStaticProps = async () => {
  const res = await fetch("https://cat-fact.herokuapp.com/facts");
  const json = await res.json();
  return { props: { facts: json } };
};

export default AboutPage;

Now you have created your very own cat facts application!

Deploying Next.js

Deploying your Next.js application depends on what types of rendering methods you are using in your application.

If your application is 100% static you can do what is called a static export. Next.js will build the website into completely static files.

Using static export will opt out of features such as server-side rendering, incremental static regeneration, i18n, and API routes so you have to consider it carefully.

Static sites are the easiest and cheapest to render. I recommend using a dedicated Next.js host such as:

Netlify
Vercel
DigitalOcean
Render
layer0
Heroku

All of these services start for free and come with features such as SSL certificates, CDN, custom domain integrations, and CI pipelines. All you have to do is just connect your GitHub repository to get started.

If your application uses any of the features that opt out of static export, you have two choices.

Serverless platform or server platform.

To note the differences quickly:

Serverless takes care of the infrastructure and scaling for you at the cost of less control, functionality, and slow start times.

Served might take more time to set up if you are not using a Next.js specific host, has a cost attached to running your server 24/7 but comes with performance benefits.

For serverless you have the following choices:

Netlify
Vercel
layer0

And for the server you have:

DigitalOcean
Heroku
Render

Of course, you can always self-host Next.js but this will require knowledge of technologies such as Nginx, Kubernetes, and more.

Conclusion

In this article we covered:

How Next.js helps you build fully-fledged websites quickly and efficiently.
How the multiple different rendering methods of Next.js allow you to optimize your website's pages to your specific needs.
How Next.js can simplify your infrastructure.

Now that you know what Next.js is used for and how it can help you build websites quicker you can start learning more about the internals of Next.js by going over the official Next.js quick start guide.

Build a React Form with react-hook-form and zod

Austin Shelby — Mon, 13 Jun 2022 09:23:50 +0000

In this tutorial you will learn how to use react-hook-form and zod to build a form with validation.

If you prefer a video tutorial instead, you can watch it below.

Clone the project from GitHub.

This is what we are going to be building:

Let's start with a little bit of boilerplate code for our form component:

import { FC } from "react";

const Tiers = [
  {
    id: "BRONZE",
    name: "Bronze",
    description: "Get average points",
    price: 0.99,
  },
  {
    id: "SILVER",
    name: "Silver",
    description: "Get extra points",
    price: 4.99,
  },
  {
    id: "GOLD",
    name: "Gold",
    description: "The highest possible tier",
    price: 19.99,
  },
];

export const Form: FC = () => {

  return (
    <form className="space-y-10">
      <div>
        <label className="block">
          <span className="block">Email</span>
          <input
            type="text"
            className={`block border text-lg px-4 py-3 mt-2 rounded-lg border-gray-200 focus:bg-white text-gray-900 focus:border-blue-600 focus:ring-0 outline-none w-full  disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed`}
          />
        </label>
      </div>
      <div>
        <label className="flex items-center">
          <input
            type="checkbox"
            className="block border text-lg rounded w-6 h-6 border-gray-200 text-blue-600 focus:ring-0 focus:outline-none focus:ring-offset-0 disabled:text-gray-200 disabled:cursor-not-allowed"
          />
          <span className="block ml-4">I accept the Terms of Service</span>
        </label>
      </div>
      <div>
        <p className="block">Payment Tier</p>
        <ul className="space-y-2 mt-2">
          {Tiers.map((tier) => {
            return (
              <li
                className={`border rounded-lg border-gray-200 text-gray-900`}
                key={tier.id}
              >
                <label
                  className={`flex justify-between px-6 py-4 items-center cursor-pointer`}
                >
                  <div>
                    <p className={`font-medium text-lg`}>{tier.name}</p>
                    <p className={`text-sm opacity-80`}>{tier.description}</p>
                  </div>
                  <div className="flex items-center">
                    <p className={`font-medium mr-4 text-sm`}>
                      {tier.price.toLocaleString("en-US", {
                        currency: "USD",
                        style: "currency",
                      })}
                    </p>
                    <input
                      type="radio"
                      className="w-6 h-6 border ring-0 border-gray-200 text-blue-600 disabled:text-gray-300 outline-none focus:ring-0 focus:ring-offset-0 cursor-pointer"
                      value={tier.id}
                    />
                  </div>
                </label>
              </li>
            );
          })}
        </ul>
      </div>
      <button
        type="submit"
        className="w-full px-8 py-4 flex items-center justify-center uppercase text-white font-semibold bg-blue-600 rounded-lg disabled:bg-gray-100 disabled:text-gray-400"
      >
        Create account
      </button>
    </form>
  );
};

This just gets us the form with styling without any functionality added yet.

Building a form validation schema with zod

Let's build a schema that matches the values in our form.

Let's start off by importing the necessary libraries:

import { z } from "zod";
import { SubmitHandler, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

And let's define our schema with some custom error messages:

const FormSchema = z.object({
  email: z.string().email(),
  accept: z.literal(true, {
    invalid_type_error: "You must accept Terms and Conditions.",
  }),
  tier: z
    .string({ invalid_type_error: "Please select a payment tier." })
    .refine((val) => Tiers.map((tier) => tier.id).includes(val)),
});

We will use a string validation chained with an email validation for our email field.

For the accept terms of service checkbox we will use literal validator with the value of true. Literal just means that the field must be exactly this value. Notice that we are also using a custom error message for invalid_type_error. Later in this tutorial you will learn how to show the error messages.

For our payment tier validation we first check if the value is a string and then use a custom validation using refine to check if the string matches one of the IDs from our predefined Tiers array.

Let's infer a type from it that we are going to use moving forward:

type FormSchemaType = z.infer<typeof FormSchema>;

We can see that TypeScript inferred the following type from it:

type FormSchemaType = {
    email: string;
    accept: true;
    tier: string;
}

This will help us keep all our functions type safe.

Using react-hook-form

Let's use react-hook-form to handle our form state.

Add this code inside your Form component:

export const Form: FC = () => {
  const {
    register,
    watch,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<FormSchemaType>({
    resolver: zodResolver(FormSchema),
  });

  const onSubmit: SubmitHandler<FormSchemaType> = async (data) => {
    await new Promise(async (resolve) => {
      await setTimeout(() => {
        console.log(data);
        resolve(undefined);
      }, 3000);
    });
  };

We have used the useForm function and given it the type of our schema. This will help TypeScript to properly keep our code type safe.

We have created a onSubmit function that after a 3 second delay will log the validated form data into the console. I wanted to add an artificial delay to better emulate a real world scenario.

If we try filling the form and submitting it, nothing happens. This is because we haven't yet registered the form inputs or made the form to use our custom onSubmit function.

Registering inputs

We can register the form inputs by using the register function we get from useForm by giving the name of the field that matches the one in our schema.

For example for the email field:

          <input
            type="text"
            className={`block border text-lg px-4 py-3 mt-2 rounded-lg border-gray-200 focus:bg-white text-gray-900 focus:border-blue-600 focus:ring-0 outline-none w-full  disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed`}
            {...register("email")}
          />

And accept terms of service:

          <input
            type="checkbox"
            className="block border text-lg rounded w-6 h-6 border-gray-200 text-blue-600 focus:ring-0 focus:outline-none focus:ring-offset-0 disabled:text-gray-200 disabled:cursor-not-allowed"
            {...register("accept")}
          />

And for the payment tier radio button:

                    <input
                      type="radio"
                      className="w-6 h-6 border ring-0 border-gray-200 text-blue-600 disabled:text-gray-300 outline-none focus:ring-0 focus:ring-offset-0 cursor-pointer"
                      value={tier.id}
                      {...register("tier")}
                    />

Using custom onSubmit handler

The handleSubmit function we get from useForm does two things. First it disables any default form submission behaviors, and second it calls our custom onSubmit function with the validated data.

    <form className="space-y-10" onSubmit={handleSubmit(onSubmit)}>

Now if you try filling the form and submitting it you will see that after 3 seconds the validated form values get logged into the console.

If you fill the form with invalid values you will see that the correct error messages appear.

One problem you might have noticed is that you can click on the create account button multiple times and the form will submit multiple times. This is obviously something we don't want to happen.

Let's fix that by disabling all form inputs and the submit button when the form is submitting.

Disabling form inputs

We will use the isSubmitting value we get from formState which we get from useForm to check whether the form is currently submitting or not.

For our inputs and submit button we will disable them using this value.

Example for our email input:

          <input
            type="text"
            className={`block border text-lg px-4 py-3 mt-2 rounded-lg border-gray-200 focus:bg-white text-gray-900 focus:border-blue-600 focus:ring-0 outline-none w-full  disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed`}
            {...register("email")}
            disabled={isSubmitting}
          />

Add the disabled={isSubmitting} attribute to other fields and the submit button.

Now when you submit the form you will notice that all the fields and the submit button get disabled until the data gets logged into the console.

But what about if the form is not valid?

Show error messages

Currently if you try submitting a form with invalid fields, nothing happens.

Let's change that by conditionally showing error messages for each of the fields if they are invalid.

For our email field:

          <input
            type="text"
            className={`block border text-lg px-4 py-3 mt-2 rounded-lg border-gray-200 focus:bg-white text-gray-900 focus:border-blue-600 focus:ring-0 outline-none w-full  disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed`}
            {...register("email")}
            disabled={isSubmitting}
          />
        </label>
        {errors.email && (
          <p className="text-sm text-red-600 mt-1">{errors.email.message}</p>
        )}

and accept terms of service button:

        {errors.accept && (
          <p className="text-sm text-red-600 mt-1">{errors.accept.message}</p>
        )}

and for payment tiers after the ul tags:

        {errors.tier && (
          <p className="text-sm text-red-600 mt-1">{errors.tier.message}</p>
        )}

Now when you try submitting the form with invalid fields you should see the error messages showing.

The default behavior of react-hook-form is to validate the form when submitting for the first time. After this it will validate the form after every key press and blur event.

Conclusion

In this tutorial you learned how to combine react-hook-form and zod to create a fully fledged form with validation.

For next steps, dive into the react-hook-form documentation to learn more advanced concepts such as: dynamically generated fields and multi step forms.

Why I Specialize in Next.js Website Development

Austin Shelby — Fri, 20 May 2022 08:58:27 +0000

If you are just wondering if Next.js is a good choice for building a website, the answer is definitely YES. I will be telling you all about how Next.js compares to other frameworks like Django or Java Spring and why it might even be better is certain areas.

Over the years I have tried tons of different website development frameworks such as Django and Flask that are written in Python, and Java Spring.

All of these frameworks lacked something and I felt like I was fighting against the limitations of them.

During this time I was heavily into making React.js websites using create-react-app. It worked great.

Until it didn't.

If you are a react developer you have probably faced these same issues too:

Client side rendering is bad for SEO and website performance
You are required to create a separate backend service if you are dealing with sensitive data such as API keys, authentication or private information
Bundle sizes are huge

During this time I heard about Next.js and from the first look it seemed to solve all of these issues.

What makes Next.js different

The main selling points of Next.js for me are:

Multiple different rendering methods (static, server-side, client-side)
Backend capabilities with API routes
Using server side code directly in your frontend pages
Incredible tools that will make your life so much easier

So let's take a deep dive and see why these reasons made Next.js a no brainer to me.

Built for SEO

There are two things that make Next.js a killer website framework for SEO.

Its incredible performance and multiple different page rendering methods.

Next.js allows you to pre-render your pages before your users request them, gaining huge performance boost. The only downside is that if you want to make any changes to the page's content you have rebuild the whole site.

An average website with ten to a hundred pages takes around one to two minutes to build.

Always calculate these risks and rewards before you choose a certain rendering method. Check how many pages you have, how often they are going to be updated on average, and how long does building them take.

An alternative for pages that update often is to use server-side rendering.

This will cause the page to be built on demand whenever users request it. This takes a little longer than statically rendering it ahead of time. Especially if you are using serverless functions.

If you are using server-side rendering a lot consider hosting your website on a platform like DigitalOcean App Platform which is not going to slow you down as much serverless platforms like Netlify or Vercel.

Core Web Vitals

Google's Core Web Vital metrics have become an important thing to consider if SEO is important for your website.

Thankfully Next.js performs extremely well in this regard thanks to its multiple different render methods.

API routes

Basic React websites suffer from a major problem. All of your code will be visible to all users.

This means that you cannot store secrets like API keys in your code. Most common use cases for API keys are fetching data from a database or a content management system, or submitting forms for example.

If your website was built with React only you would be forced to built a separate back-end service just so you can keep your API keys hidden. This obviously increases development time significantly and makes your architecture more complex.

Next.js solves this problem by allowing you to create API routes within your regular Next.js application. This allows you to build your website significantly faster and more securely.

Another benefit is that you can use your backend code directly in your frontend pages without exposing any confidential data. This means that you can query your database or content management system within your website pages, allowing you to skip creating API routes altogether.

Incredible tooling

The open source community has built some incredible tools for Next.js that make building some common features fast and easy.

For authentication there is next-auth.

For end-to-end typesafe APIs there is tRPC.

For SEO there is next-seo.

These tools are some of my favorites which I use in almost all of my website projects.

In addition to these you will of course have access to all React tools.

The Next.js advantage

All of these things are nice, but how do they translate to actual business results?

After I switched to Next.js I noticed that my client projects took less time, were less error prone, and performed better in regards to SEO.

That's why when clients come to ask me for help for their website I usually end up recommending Next.js

Next.js is the perfect website framework for websites such as:

Real estate websites
Blogs
Landing pages
Complex web applications
Information heavy sites
eCommerce sites

One of my clients, StartSteps Digital Education, got up-to 600 percent performance increase on certain pages. Read the whole case study here. This ended up increasing the amount of traffic they are getting from search engines thanks to its SEO boost.

Key takeaways

You should consider using Next.js if SEO and website performance are important for your business.

Next.js is a great solution especially for freelancers as it allows just a single person to take control of the whole website architecture saving tons of time and money.

So you have an idea for a startup—here's how to build it

Austin Shelby — Tue, 30 Nov 2021 11:36:33 +0000

So you have an idea for the next unicorn startup and the only thing between you and success is actually building it.

I have been there too and while my side projects never got to a billion dollar evaluation—I learned how to build them. Quickly and efficiently.

After reading this article you will have the knowledge to choose the correct tech stack for your startup that the top 0.1% of companies are using.

What is Jamstack

The most important factor for startups is to create websites quickly without compromising the development of features added in the future.

There have been numerous website architectures emerging from this need but only one of them has really gotten mainstream attention.

It’s called Jamstack.

Some of the main benefits of Jamstack architecture are speed, security, developer experience, and the ease of scaling.

Just like the technology director at Pac Macmillan—James Luscombe says about moving their tech stack to Jamstack:

The move to the Jamstack was about speed, accessibility, and taking the worry out of deployment

In this article we will be building a Jamstack based architecture where most of your efforts can be put into actually programming the core business logic of your website instead of having to worry about the boring stuff.

Instead of focusing on individual technologies, I want you to understand the general concepts behind choosing each piece.

The best frontend

The best tool to build a frontend for startups is Next.js. Even people not so familiar with frontend web development have heard about Next.js

There are a few good reasons for it:

It comes batteries included greatly reducing the time to setup a project
It has exceptionally low page load times which is great for Core Web Vitals and SEO
It comes with kick ass features like i18n, routing, server-side rendering, and now middlewares.

If you are not sure if your website's performance is limiting your ranking on search engine results, take my core web vitals test (takes 3 seconds) to check your score.

Instead of having to build a backend just to create a few API endpoints so you can get the data to your frontend, Next.js allows you to directly query data source of your choice from the frontend.

Of course they ingeniously keep this secure by using either static site generation or server side rendering.

Which, as I mentioned earlier greatly reduces development time as you don’t need a dedicated backend.

Instead, you can put your efforts into building a more smart content management solution.

The best backend

When choosing a backend you have to consider who is going to be using your website and for what purpose.

Do they need a visual interface?

Are they going to be manually entering data?

Based on what we know so far about building minimum viable products we are going to be looking at two different solutions.

GraphCMS
Fauna

Again to remind you, the main thing we are looking for is a backend that allows us to focus on the business logic without having to worry about the boring stuff—greatly reducing the development time.

The easiest solution

GraphCMS comes with an easy to use and simple graphical UI that allows non-technical people to add, edit, delete, and publish content.

Unlike most content management systems GraphCMS allows you to also create items programmatically, not only read.

As the name suggests, it comes out of the box with a GraphQL API. The documentation is excellent and the very generous free tier allows you to kick-start your business in record time.

It comes with some pro features like localization and remote data fetching to federate content from external sources.

GraphCMS gives you instant GraphQL Content APIs to create, enrich, unify, and deliver your content across platforms.

The best solution for speed

FaunaDB is the closest you can get to the database without compromising developer experience or productivity.

Simply put, it is the best solution when you need high performance, scalability, ACID transactions and advanced features like streaming.

Fauna prides itself in Get started in minutes, without the heavy lift.

Fauna comes with a graphical user interface but it’s most powerful when used through the API with its own query language FQL.

Focus on your application instead of managing database clusters, provisioning capacity, creating replicas, or sharding data. Fauna does all the work for you behind the API so that you don’t have to.

Hosting

Hosting is traditionally considered a very difficult thing to do.

For example—you have to take care of CI/CD pipelines. This includes automated build and test setups. Deployment scripts, rollbacks and all kings of other boring stuff.

The problem of creating all of this from scratch by yourself is that the time spent doing all of that is time NOT spent on building your actual product.

We want a solution that already comes with all of those features.

The hosting solution that I recommend is Netlify.

Netlify brings tons of features that you love and even more features that you probably didn’t even know you want like A/B testing.

First of all their CDN is globally available meaning people from all over the world can access your website lightning fast.

They are fully supporting the git feature branch workflow that agile teams all over the world love.

They have preview deployments for each branch or pull request you make, making it easy to test your website on every change.

Netlify has a very generous free tier meaning that you can get started without paying a single cent.

Third party services

Another major thing you have to focus on when building your startups is not reinventing the wheel.

Time is money. So don’t waste it by building something from scratch when an already made solution exists.

Instead of adding an elastic search database to your stack to get full text search, just use Algolia.

Instead of reinventing video streaming and automatic image optimizations and sharing, just use Bunny CDN.

By using third party services you can take the stress out of building your product by not having to worry about coding every little thing by yourself.

Conclusion

Now that you know why Jamstack won't slow you down when coding your product, you can confidently start to build your startup.

Just like we covered, Jamstack:

Allows you to focus on programming the core business logic of your application
Makes your website fast and secure
Is easy to extend with third party APIs

If you are interested in the actual technical side of building a startup, take a look at my YouTube channel where I teach exactly that—using modern web development techniques.

You are reading environment variables the wrong way in Next.js

Austin Shelby — Mon, 18 Oct 2021 12:38:54 +0000

If you have ever written code that looks like this:

const url = `https://www.example.com/api/blog?api_key=${process.env.API_KEY}`

Then you are doing it wrong!

Here's why this is a bad idea.

In a scenario where you build the application without having set the API_KEY environment variable the application will use undefined instead.

Obviously undefined is not the correct api key which will make any request using that URL fail.

The problem here is that when the error surfaces, the message will be very misleading and look something like this:

Error: Unauthorized

And this error will only show up when you try to use the url to fetch the blog posts.

If fetching the blog posts is an essential feature, the application should not have even compiled without the api key being available.

Naively expecting the API_KEY environment variable to exist will hide the bug and make this problem a pain to debug due to the misleading error message.

To fix this issue we need two things.

When a problem exists that causes the application to not function, the application needs to fail immediately and visibly.
A meaningful abstraction to encapsulate the loading of environment variables.

How to load environment variables in Next.js

This works with any node.js application. Next.js just makes this easier, as it comes with a lot of necessary boilerplate code.

Let me show you how to use environment variables in Next.js correctly, and then explain why this works.

Create a .env.local file. Here you will put all of your environment variables you want to use on your local development environment.

API_KEY=secret

Next.js automatically adds this file to .gitignore so you don't have to worry about it ending up in your version control system.

If you are using any other framework than Next.js you need to use a package like dotenv to read the environment variables from a file.

Now to the bread and butter.

Create a config.ts file with this code to read the environment variables into your config.

const getEnvironmentVariable = (environmentVariable: string): string => {
  const unvalidatedEnvironmentVariable = process.env[environmentVariable];
  if (!unvalidatedEnvironmentVariable) {
    throw new Error(
      `Couldn't find environment variable: ${environmentVariable}`
    );
  } else {
    return unvalidatedEnvironmentVariable;
  }
};

export const config = {
  apiKey: getEnvironmentVariable("API_KEY")
};

And change code that we wrote earlier into this:

import { config } from "./config"

const url = `https://www.example.com/api/blog?api_key=${config.apiKey}`

Why this is the correct way to load environment variables

In a case where you forgot to add the environment variable API_KEY the application won't even build/compile, and it will throw an error like this: Couldn't find environment variable: API_KEY.

Our application now fails immediately and visibly.

This is called failing fast.

It is part of the clean code principles, which you can read more about here: https://www.martinfowler.com/ieeeSoftware/failFast.pdf

Because we are using TypeScript, we can be 100% sure that all the values in the config exist.

Additionally, TypeScript helps us avoid small bugs.

If we make a typo:

const url = `https://www.example.com/api/blog?api_key=${config.apiKeu}`

TypeScript will give us the following error:

Property 'apiKeu' does not exist on type '{ apiKey: string; }'. Did you mean 'apiKey'?

How cool is that!

It's like coding with superpowers.

Encapsulating logic

Let's look at the example we started with:

const url = `https://www.example.com/api/blog?api_key=${process.env.API_KEY}`

Do you notice that process.env part there?

Why should the functionality of fetching blog posts know anything about the user environment the application is currently running in?

Well it shouldn't.

The logic of fetching blog posts doesn't care where it gets the api key from. If it comes from the user environment, text file, or an API doesn't make any difference to it.

Therefore, it shouldn't rely on process.env or any other low-level abstractions.

Creating a config for the sole purpose of reading environment variables encapsulates this functionality and creates a meaningful high-level abstraction.

A config.

Thanks to this, we can change the way we get the config values (like the api key) without touching the blog post functionality at all!

Another very hidden benefit is that unit testing just became ten times easier. Instead of playing around with our user environment, we can just mock the config with the values we want to.

Conclusion

While this might seem pedantic, keeping these small things in your mind while writing code will make you a better software engineer.

Before Building a Website You Need to Design a Sitemap [Here's why]

Austin Shelby — Mon, 06 Sep 2021 11:01:45 +0000

Give me six hours to chop down a tree and I will spend the first four sharpening the axe.

- Abraham Lincoln

If you are struggling to start building your website this blog post will help you develop a plan that will get you started.

We are going to be designing a sitemap for your website using a easy-to-use visual tool.

To learn all the necessary techniques we are going to break down Product Hunt's website and see how they have designed their sitemap.

Once you have made a plan for your website's structure, building it will become easy and straightforward.

Analyzing Product Hunt's sitemap

If you haven't heard, Product Hunt is a massively popular website where founders can post their SaaS products and get feedback on them.

I took the time and crawled their website to reverse engineer how they have built their website's page hierarchy.

By breaking down their sitemap we are going to learn the techniques they use to rank high for competitive keywords, get massive amounts of users, and create tons of engagement.

At the end of this article I'm going to give you the exact checklist you can apply to your own website.

Identify main content on your website

People visit Product Hunt to discover and share the latest products.

These product posts are the bread and butter of their website and why they are so popular. They are the most essential content and everything else on the website should only exists to emphasize their importance and discoverability.

In the diagram the Post objects have the most lines leading into it.

This means that it's being linked into from many different places.

This helps people to discover new posts wherever they are in the website.

These products posts are user generated content but in your case the content might be created by yourself.

For AirBnb it's apartments.

For YouTube it's videos.

For Twitch it's live streams.

Create list pages

Now that you have figured out what content your users are most likely wanting to find on your website, it is your job to make it as easy as possible for them to find it.

You want to create pages where you can list the content.

Let's look at how Product Hunt does it.

They have multiple different Topic pages where they can list the appropriate posts.

You can also find posts on user profiles. Either submitted by the user or in their collection.

Posts in collections can be from other people too. This will create a lot of engagement as you will have multiple different ways to interact with other people's posts.

Build ultra specific pages

Ultra specific list pages are exactly what they sound like.

They are used to group similar items together in categories.

Creating separate pages for each category helps your users to find what they want effortlessly.

In Product Hunt's case they have pages like:

Productivity
Tech
Analytics
Internet of Things
Artificial Intelligence
Writing Tools
Virtual Reality

The great thing about this is that you don't have to create any new content. You can reuse your already existing content and just categorize them in new ways.

A lesser known benefit of this is that it helps you with search engine optimization. Using specific keywords as the title on these pages and listing related content makes this a super SEO strategy.

This has allowed Product Hunt to rank for competitive keywords like Touch Bar Apps 2021.

Let's look at some ways other websites categorize their content.

Twitch.tv has categories for each of the games on the platform.

AirBnb has category pages for each location in the world. That's a lot!

If you have large amounts of content you can and should absolutely create these pages programmatically if possible.

Use a secret Google tool to create a sitemap

Now to make everything come together we are going to be using a secret Google tool that almost no one knows about.

This tool is so rare that Google itself doesn't list it on their products page: https://about.google/intl/en/products/.

It's called Drawings and you can use it to create all kinds of diagrams.

If you like the sitemap designs on this page you can download the free website sitemap template here.

Or alternatively you can make yours from scratch using the tool here: https://docs.google.com/drawings.

On the top bar choose Insert > Diagram and on the panel that opens on the left choose Hierarchy and choose any style you want.

Conclusion

Now that we have learned the techniques Product Hunt uses to organize their website and get massive traffic through SEO it's time for you to apply it on your website.

Create a sitemap checklist:

Write down what is the most essential content on your website. It might not be so easy to find as these examples but make sure you get it right as it leads us to the next point.
Figure out how users can interact with the content on your website and where can you list the content most efficiently.
Look at your already existing content and write down 7 categories that you can fit them in. Search those categories on Google to see what kind of keywords pop up on the results.
Now that you know how to organize the pages on your website think about the other website features you should have on your website for it to be successful.
Use Google Drawings to create a sitemap for your website using my free sitemap template. After you are done message me on twitter https://twitter.com/theaustinshelby or send me an email and I will give you feedback on it.

Forem: Austin Shelby

What Is Next.js And Why Developers Love It

Table of Contents

What is Next.js

Static site generation

Server-side rendering

Incremental static regeneration

Client-side rendering

What makes Next.js unique?

What kinds of websites is Next.js best suited for?

Who uses Next.js

Backlinko

Hulu

Pros of Next.js

Cons of Next.js

How to start a new Next.js project

Page routing

Rendering pages

Deploying Next.js

Conclusion

Build a React Form with react-hook-form and zod

Building a form validation schema with zod

Using react-hook-form

Registering inputs

Using custom onSubmit handler

Disabling form inputs

Show error messages

Conclusion

Why I Specialize in Next.js Website Development

What makes Next.js different

Built for SEO

Core Web Vitals

API routes

Incredible tooling

The Next.js advantage

Key takeaways

So you have an idea for a startup—here's how to build it

What is Jamstack

The best frontend

The best backend

The easiest solution

The best solution for speed

Hosting

Third party services

Conclusion

You are reading environment variables the wrong way in Next.js

How to load environment variables in Next.js

Why this is the correct way to load environment variables

Encapsulating logic

Conclusion

Before Building a Website You Need to Design a Sitemap [Here's why]

Analyzing Product Hunt's sitemap

Identify main content on your website

Create list pages

Build ultra specific pages

Use a secret Google tool to create a sitemap

Conclusion

Create a sitemap checklist: