NextJS SSR on Azure App Service

This guide shows you how to deploy a server-side rendered (SSR) NextJS site on Azure’s App Service.

Azure App Service — a fully managed platform as a service (PaaS) offering — is an HTTP-based service for hosting web applications, REST APIs, and mobile back ends. It supports NodeJS, which is what we need.

The sample app

We’ll deploy a simple NextJS SSR app that has one page that fetches data from a third-party API in getServerSideProps . The getServerSideProps method is invoked at request-time to retrieve data, which is then passed via props to the page component to be rendered (still on the server, i.e. on the App Service). The rendered result is then sent to the browser. That’s server-side rendering in NextJS in a nutshell.

// pages/index.tsx

const Home = ({ users }) => {
  return (
    <div>
      Users (fetched at request-time (<b>getServerSideProps</b>))
      <ul>
        {users?.map((u) => (
          <li key={u.id}>{u.name}</li>
        ))}
      </ul>
    </div>
  );
};

export const getServerSideProps = async () => {
  // jsonplaceholder is a good free API for simple demos like this one
  const res = await fetch(`https://jsonplaceholder.typicode.com/users`);
  const users = await res.json();
  return { props: { users } };
};

export default Home;

Create an App Service