Cloud Deployment

July 10th, 2020 By Alex Hu

Vercel, the creator of Next.js, has this really easy deployment for Next.js app. All you need to do is to import your Git Repository and the Git Integrations allows automatic deployments on every push.

For example, this site is at https://portfolio.alexhu.vercel.app/ and I only have to manually deploy it once in the very beginning, then just push my code to the repository. I was looking for the redeploy button on their site but couldn't find one, then I released that it is automatic!

Static Site Generation

My site was built without problem and the Index page and Posts page run fine. But it gives the following error for initial post article (pages/posts/[id].tsx)

An error occurred with this application.
This is an error with the application itself, not the platform.

502: BAD_GATEWAY
Code: NO_RESPONSE_FROM_FUNCTION
ID: sfo1::8skpg-1594403487039-f833ea7fd94f

I notice that the only different between them is the getStaticProps() is used in the Posts page, while the [id] page is using getServerSideProps() My getServerSideProps() used context.query which is causing the error:

export const getServerSideProps = async (context: Context) => {
  const { id } = context.query

and switch to use context.params resolved the problem.

export const getServerSideProps = async (context: Context) => {
  const { id } = context.params ? context.params : context.query

Since my site can be run using server static generation, I decide to switch to getStaticProps().

export const getStaticProps = async (context: Context) => {
  console.log('getStaticProps -> context', context) // when in doubt, console log the context
  const { id } = context.params ? context.params : context.query
  const apolloClient = initializeApollo()
  try {
    await apolloClient.query({
      query: ArticleQuery,
      variables: {
        id,
      }
    })
  }
  catch (error) {
    console.error('Post -> getStaticProps -> error', error)
  }
  return {
    props: {
      id,
      initialApolloState: apolloClient.cache.extract(),
    }
  }
}

Since the [id] page has dynamic routes, you also need a getStaticPaths() to define a list of paths that have to be rendered to HTML at build time, such as

export async function getStaticPaths() {
  return {
    paths: [
      '/posts/a-new-beginning',
      '/posts/sprint-1-gearing-up',
      //...
      '/posts/cloud-deployment',
    ],
    fallback: true,
  }
}

The actual code uses a GraphQL query for the list of articles to compile the paths.

export async function getStaticPaths() {
  const apolloClient = initializeApollo()
  try {
    const result = await apolloClient.query({
      query: ArticlesQuery,
    })
    const articles = R.defaultTo([], result?.data?.articles)
    const paths = R.map(article => `/posts/${article.id}`, articles)
    return {
      paths,
      fallback: true,
    }
  }
  catch (error) {
    console.error('Post -> getStaticPaths -> error', error)
  }
  return {
    paths: [],
    fallback: true,
  }
}