Part 47: Deploying Your Static Next.js Website in Netlify
[App] Deployment
Once you've configured Next.js to export your app as a static website, the build process will create a folder named "out." This folder contains all the HTML and other static files necessary for your site. The next step is to deploy these files to a web server, making your site publicly accessible.
Choosing a Hosting Option
You have several choices for hosting your static website. You can set up your own web server or use one of the many hosting providers available. For simplicity, let's explore an example of deploying using a platform that allows you to create a new site by uploading files directly.
Steps to Deploy
Sign in to the Hosting Platform: After signing in, you'll have access to a dashboard where you can manage your sites. Many platforms offer options to import a Git repository or deploy manually by uploading files.
Upload the "out" Folder: You can manually deploy by dragging the "out" folder generated by the Next.js export into the platform's upload area. This straightforward process will automatically create a new site for you.
Site Configuration: Once the deployment is successful, you can manage your project settings. The platform may generate a default name for your site, which you can usually change in the site settings. For example, you might rename it to something more recognizable, like "my-static-site."
Access Your Site: Your site will be available under the platform's domain, such as "my-static-site.exampleplatform.com." You can open this URL to see your static website live, with all the pages functioning as expected.
Custom Domains
While the default subdomain is a quick way to get started, you might want to set up a custom domain for a more professional appearance. Hosting platforms typically provide a straightforward process for configuring custom domains, which can be found in their documentation.
To update this guide for deploying a Next.js static site using Netlify, you can follow these streamlined steps. Netlify is a popular platform for hosting static sites due to its simplicity and robust features.
Deploying Your Static Site on Netlify
Prerequisites
Ensure your Next.js app is configured to export as a static site, creating an "out" folder.
Sign up for a free Netlify account if you haven't already.
Steps to Deploy
Sign in to Netlify:
Visit Netlify's website and log in to your account.
Once logged in, you'll be taken to the Netlify dashboard.
Create a New Site:
On the dashboard, click on the "Add new site" button.
Choose the "Deploy manually" option to upload your site files.
Upload the "out" Folder:
Drag and drop your "out" folder into the Netlify upload area.
Netlify will automatically process the files and deploy your site.
Site Configuration:
After deployment, you can access your site settings from the dashboard.
Netlify will assign a default domain name to your site, which you can customize under the "Site settings" section.
Access Your Site:
Your site will be live under the Netlify-generated domain, such as "my-static-site.netlify.app".
Visit this URL to see your static website in action.
Custom Domains
To use a custom domain, navigate to the "Domain settings" in your site's dashboard.
Follow the instructions to add your custom domain and configure DNS settings. Netlify provides guidance to make this process smooth.
Conclusion
Deploying a static site is a simple process once you have your static files ready. Platforms that support file uploads make it easy to get your site online quickly. Although we used a specific platform in this example, there are numerous other options available for hosting static websites. The choice depends on your specific needs and preferences.
Last updated