There is certainly no shortage in ways to get your Next.JS app deployed and on a server somewhere – so much so that it can be a bit overwhelming if you're just starting to research your best options (especially once you get into the AWS ecosystem). The solution we chose for our website here at Kickstart Crew is a combination of [AWS Amplify](https://aws.amazon.com/amplify) and [GraphCMS](https://graphcms.com). Amplify makes it incredibly easy to get a static site up and running in minutes and I will go over how to do just that with you here. Before that let's go over the game plan. Our goal here is to take advantage of Next.JS for static site generation, use GraphCMS to populate the site with data at build time, and to have GraphCMS trigger new builds when content gets published or unpublished.
​
## 1. Next.JS getStaticPaths and getStaticProps
​
This article assumes you already have experience with Next.JS. I will not be going over how to create an app but rather how to take advantage of [getStaticPaths](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation) and [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation). We will use `getStaticPaths` to query if different pages are blog posts, or projects in our case, so that Next.JS knows what pages to generate. After it knows what pages to generate, Next.JS will call `getStaticProps`. This is where we will make our request to GraphCMS to get the data needed to populate each page. This is how it might look when adding `getStaticPaths` and `getStaticProps` to a dynamic page with the name `[slug]`. If you are using a different param, replace `slug` with your param in the following code.
​
```
export const getStaticPaths = async () => {
    const apolloClient = initializeApollo()
    const { data }: ProjectsQueryResults = await apolloClient.query({
        query: GET_ALL_PROJECTS_QUERY,
    })
    const projects = data?.projects || []
    return {
        paths: projects.map(({ slug }) => ({ params: { slug } })),
        fallback: false,
    }
}
​
export const getStaticProps = async ({
    params,
}: {
    params: { slug: string }
}) => {
    const apolloClient = initializeApollo()
    const { data }: ProjectQueryResults = await apolloClient.query({
        query: GET_PROJECT_QUERY,
        variables: {
             slug: params.slug,
        },
    })
    const project = data?.project
    return {
        props: { project }
    }
}
```
​
After this, you can now expect `project` (in our example) to be available to the page component in props and use it to populate your page with data.
​
## 2. Building the Static Site
​
At this point, your app should be consuming the correct data and using it to populate it's dynamic routes with content. Now we can test that it builds the static pages by making some modifications to your `package.json`. First, you will need to update your scripts to looks like the following:
​
```
"scripts": {
    "dev": "next",
    "build": "next build && next export",
    "prestart": "npm run build",
    "start": "serve out"
},
```
​
Now run either `yarn add serve` or `npm i server --save` to add `serve` as a dependency and you are good to go. All you need to do now is run `npm start` and it will build your static site and serve those file for you at [http://localhost:5000](http://localhost:5000).
​
## 3. Running on AWS Amplify
​
Before we go further you will need to add a file to the root of your project called `amplify.yml` with the following contents:
​
```
version: 1
frontend:
    phases:
        preBuild:
            commands:
                - yarn install
        build:
            commands:
                - yarn run build
    artifacts:
        baseDirectory: out
        files:
            - '**/*'
    cache:
        paths:
            - node_modules/**/*
```
​
To get your new static site running on AWS Amplify you will first need an AWS account. For this tutorial I'm going to assume you already have an account. Login to  AWS and go to AWS Amplify in the console. After you get to AWS Amplify, click "New app" and then "Host web app".
![Screen Shot 2021-04-28 at 11.41.07 AM.png](https://media.graphcms.com/fgxoSUISRCuaYRqEgsKW)
From here, you can select the location of your repository (GitHub, BitBucket, GitLab, etc). After you connect it to your code repository and branch, it will start deploying your app. From here, you can set up different branches to deploy to different domain names or subdomains for your different environments.
​
## 4. Trigger AWS Amplify Builds
​
The last thing we need to do now is to set up our Next.JS app to build on AWS Amplify every time our dynamic data changes, so that our static site stays up to date. To do this with GraphCMS, you can go to the Webhooks page and create a webhook to trigger when any content you have on the website gets published or unpublished. After you create the webhook, copy the webhook url, go back to AWS Amplify, go to your app, click "Build Settings", scroll down to "Incoming webhooks", click "Create webhook", paste the webhook url, and select which branch you want built. After you do this, anytime you publish or unpublish content in your CMS, your site will rebuild on AWS Amplify and the changes will go live.
​
## 5. That's a Wrap
​
There you go! You now have a static Next.JS app with builds with dynamic data each time you make a change to the content. The build time is now the only thing to be aware of going forward as your dynamic data grows. For example, if it's a blog and you have a fast growing list of articles or you have an e-commerce site with a lot of products the slower the build time will be as it's generating the different static pages for all of the different content. I hope this was helpful. Please feel free to reach out on Twitter at [@mikeahirsch](https://twitter.com/mikeahirsch) if you have any questions.

How to Deploy a Static Next.JS App with Dynamic Content

Untire gives cancer patients and survivors the tools to reduce fatigue\nTired of Cancer’s Untire App is based on many years of experience in face-to-face therapy and online therapy with hundreds of cancer patients and survivors who suffer from extreme fatigue. Thousands of hours were spent developing the Untire app with a team of researchers and cancer specialists in the field of psycho-oncology and cancer patients and survivors. Untire uses theories and techniques from scientifically proven cognitive behavior therapy, mindfulness-based cognitive therapy, positive psychology and physical exercise interventions.\n\nThe story of how Untire came to be\nIn 2011, Dr Bram Kuiper and Door Vonk met while working at the Helen Dowling Institute (HDI), a psychological centre for cancer patients in the Netherlands. Before he became the CEO of the HDI in 2000, Bram worked at the VU Medical Centre in Amsterdam as a clinical psychologist. He offered psychological support to hundreds of cancer patients and their loved ones, provided intervision to oncological nurses and was an active advocate for integrating psychological care with medical care. Door ran her own advisory company and worked at the HDI as a fundraiser when their paths crossed. Both of them noticed that many cancer patients were suffering from severe fatigue as a result of their cancer, the medical treatments and the emotional and social impact of their illness.\n\nAfter creating successful group interventions with fatigued cancer patients, the HDI started an online training program in 2009 for the treatment of cancer-related fatigue. The training consisted of a nine-week program and weekly feedback from therapists. The results of a study on the online intervention in 2012 were amazing: 35% of the users noticed a significant, positive change in their level of fatigue. Another 50% felt much less fatigued. So 85% benefited from the therapy. It even proved to be equal to face-to-face intervention. Bram and Door realized that this was something they could take to the next level. So many more people could benefit from this! However, to upscale the online intervention in this form was impossible, with the weekly consults with therapists. They decided to turn the online therapy into an English language app, to reach millions of fatigued cancer patients worldwide, even though they knew nothing about building apps. If they’d only known what they would be up against.\n\nSince 2012, Bram and Door have been on a rollercoaster ride called Tired of Cancer. Inevitable set-backs didn’t prevent them from pursuing their goal. They blindly put their own money into the project, fully convinced that they would succeed in the end. Again and again they managed to convince investors and stakeholders with their heartfelt story and unstoppable passion for making this app. And time and time again people put their faith in their mission, even though there was no sign of the app yet. For five years Bram and Door worked in the evenings and weekends to develop their project. Admission to the Horizon2020 Phase 2 program of the European Commission was a major turning point: since July 2017 Bram and Door stopped working at the HDI and started working fulltime at Tired of Cancer. They even hired three young potentials to help them. They found creative partners to help realize their vision and technical partners to build the app. With the team working at full speed, the English version of the app will be launched in early 2018. Dutch, German and Spanish version will follow in the months thereafter.\n\nBram and Door are proud to say that the Tired of Cancer app delivers an effective, easy-to-use, self-management tool for the treatment of cancer-related fatigue. They are driven by the opportunity to increase the reach and impact of this tool worldwide for fatigued cancer patients and cannot wait to show you the app and all its benefits.

2018 Silver Winner

Best New Mobile App

Untire

You really should know where your meat comes from\nIn 2017, founder Ben Spell and his wife welcomed their first child into the world. It didn’t take long to realize that their options for quality and affordable meats were limited. In 2018, Ben expanded on his grandparent’s legacy by establishing Good Ranchers. The Mission? To provide families all over the country with affordable, tasty, high-quality meat you can trust. Good Ranchers first started out by opening tents in cities across the US to sell their locally resourced meat. They reached out to us with the goal to sell their meat online so more families could benefit from their low prices and high quality.\n\nDesigning a seamless checkout process\nWe started out by designing the different pages we were working on for this new shopping experience. The main goal was to make the experience enjoyable and seamless to get from the product you were interested in to the checkout form. We did this by studying leading industry standards for e-commerce website design and information architecture and implementing a solution that best matched their needs.\n\nDesigns that tell the story\nAnother important part of the new website experience was a place for new customers to come and learn what makes Good Ranchers different. We wanted to capture the story and present it in a fun and educational way. We did this by creating a page that customers can scroll through and get a complete picture of how Good Ranchers is changing the way meat gets delivered to your door.

Good Ranchers

Connecting a community for change\nHealthcare is something we all need to protect those we love. What you need and how you protect them should be left up to you. So, Impact Health Sharing created a community of individuals and families like you that is set to change the face of healthcare as you know it. They combine health sharing methods, that have existed in the faith community for years, with technology innovations to provide a more convenient, more affordable and more effective approach to healthcare. Impact Health Sharing has designed a system that puts the power, the freedom and the control in paying for healthcare back into your hands.\n\n

Impact Health Sharing

GMTM is "The Athlete Exposure Platform."\nGMTM enables athletes from all over the world to connect directly with the industry's top brands right from their living rooms. By creating a free profile on their website, athletes can compete in exclusive online events like virtual combines and tryouts, 'visit' their favorite teams or work with elite trainers who can help level up their game.\n\nThe more an athlete engages with GMTM, the more exposure their profile receives from our network of camps, coaches, and brands.\n\nGMTM is partnered with industry leaders like The US Olympic Committee, Volleyball Canada, various professional teams, major universities and registered NCAA recruiting and scouting services.\n\n

The Lovie Awards	2018 Silver Winner	Untire
Best Mobile App Awards	Best New Mobile App	Untire

Digital product design and development

Untire

Good Ranchers

Impact Health Sharing

GMTM

How to Deploy a Static Next.JS App with Dynamic Content