Azure Static Web Apps allows you to easily build Next.js apps in minutes. Use this repo with the Next.js tutorial to build and customize a new static site.

To run locally, open the development server with the following command:

npm run dev
# or
yarn dev

Next, open http://localhost:3000 in your browser to see the result.

For a more rich local development experience, refer to Set up local development for Azure Static Web Apps.

This starter application is configured to build a static site with dynamic routes.

The pages/project/[slug].js file implements code that tells Next.js what pages to generate based on associated data. In Next.js, each page powered by dynamic routes needs to implement getStaticPaths and getStaticProps to give Next.js the information it needs to build pages that match possible route values.

Inside getStaticPaths, each data object is used to create a list of paths all possible pages.

export async function getStaticPaths() {
  const paths = projects.map((project) => ({
    params: { path: project.slug },
  }))
  return { paths, fallback: false };
}

The getStaticProps function is run each time a page is generated. Based off the parameter values, the function matches the full data object to the page being generated. Once the data object is returned, it is used as the context for the generated page.

export async function getStaticProps({ params }) {
  const project = projects.find(proj => proj.slug === params.path);
  return { props: { project } };
}

The next.config.js file is set up to enforce trailing slashes on all page.

module.exports = {
    trailingSlash: true
};

The npm build script runs commands to not only build the application, but also generate all the static files to the out folder.

"scripts": {
  "dev": "next dev",
  "build": "next build && next export",
},

Note: If you use the Azure Static Web Apps CLI, copy the staticwebapp.config.json file to the out folder, and start the CLI from the out folder.