Free AI web copilot to create summaries, insights and extended knowledge, download it at here

1723

Abstract

de> file to add a new script for export:</p> <figure id="0a1b"> <div> <div>

            <iframe class="gist-iframe" src="/gist/okeeffed/f9e569965ff9d955042d1cda79b7cd50.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><h2 id="8f2b">Building and exporting the website</h2><p id="3ace">Under <code>pages/index.js</code> I am going to make some small adjustments for the project and add a small paragraph that says <b>This page has been updated to show how to build and export static HTML from a NextJS 10 project</b>.</p><p id="50aa">After making whatever adjustments you would like, run the following from your root directory:</p>
    <figure id="c92f">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/okeeffed/c22c2cbb0dd246dbce751955fa25d72a.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="3bda">Once you have run both commands, you’ll notice that there is now a <code>_next</code> and <code>out</code> directory created.</p><p id="88d8">The <code>out</code> directory is where <code>next export</code> will move the assets to.</p><h2 id="5d60">Seeing the final product</h2><p id="61c0">We can now serve those assets locally to see the build in action.</p><p id="0976">If you do not have it already, I recommend globally installing <a href="https://github.com/vercel/serve">Vercel’s Serve package</a> to enable you to serve the <code>out</code> directory. This ca

Options

n be done with <code>npm i -g serve</code>.</p><p id="b549">Now, run <code>serve out</code> from the root directory and you will have a URL posted to the terminal to show you where the website is being served from (generally localhost port 5000 unless busy).</p><p id="4ccf">Head to the website and you will see the following:</p><figure id="bfdf"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/0*5EuWmagQ4b75btuo"><figcaption></figcaption></figure><p id="61a6">Congrats! You have your statically exported site.</p><h2 id="2325">What’s next?</h2><p id="63a2">If you would like to see how to deploy your website to AWS S3 using the AWS TypeScript CDK, head to <a href="https://blog.dennisokeeffe.com/blog/2020-11-04-deploying-websites-to-aws-s3-with-the-cdk/">the partner post</a> and continue on.</p><h2 id="3147">Resources</h2><ol><li><a href="https://github.com/vercel/serve">Vercel’s Serve package</a></li><li><a href="https://nextjs.org/docs/advanced-features/static-html-export#caveats">NextJS Static Export Caveats</a></li><li><a href="https://blog.dennisokeeffe.com/blog/2020-11-04-deploying-websites-to-aws-s3-with-the-cdk/">Deploying NextJS to AWS S3 Using The AWS TypeScript CDK</a></li><li><a href="https://nextjs-10-static-example.dennisokeeffe.com">Final, live website deployment via the deployment blog</a></li><li><a href="https://github.com/okeeffed/nextjs-10-static-deployment-with-typescript-aws-cdk">Final code</a></li></ol><p id="6ef8"><i>Image credit: <a href="https://unsplash.com/@isiparente">Isi Parente</a></i></p><p id="6232"><i>Originally posted on my <a href="https://blog.dennisokeeffe.com/blog/2020-11-04-exporting-static-nextjs-10-websites/">blog</a>.</i></p></article></body>

Exporting Static HTML From A Next.js 10 Site

In this blog post, we’re going to take the default start from Next.js 10 and export a static site that we can host in S3.

This post goes alongside a partner post on deploying static websites to S3 using the AWS TypeScript CDK if you would like to get the site up and running on your AWS account.

Note: There are reasons for and against exporting static HTML for a NextJS application. Those needs may differ from person to person. Please see NextJS documentation on Static HTML Export for the latest caveats when using their static export feature.

Getting Started

We will use the latest create-next-app deployment to get things rolling.

Once this runs, there will be a new folder that hosts your NextJS 10 application in next-10-static-export.

Building the application

Adjust your application’s package.json file to add a new script for export:

Building and exporting the website

Under pages/index.js I am going to make some small adjustments for the project and add a small paragraph that says This page has been updated to show how to build and export static HTML from a NextJS 10 project.

After making whatever adjustments you would like, run the following from your root directory:

Once you have run both commands, you’ll notice that there is now a _next and out directory created.

The out directory is where next export will move the assets to.

Seeing the final product

We can now serve those assets locally to see the build in action.

If you do not have it already, I recommend globally installing Vercel’s Serve package to enable you to serve the out directory. This can be done with npm i -g serve.

Now, run serve out from the root directory and you will have a URL posted to the terminal to show you where the website is being served from (generally localhost port 5000 unless busy).

Head to the website and you will see the following:

Congrats! You have your statically exported site.

What’s next?

If you would like to see how to deploy your website to AWS S3 using the AWS TypeScript CDK, head to the partner post and continue on.

Resources

Image credit: Isi Parente

Originally posted on my blog.