Build a statically generated application with Next.js
Single-page applications (SPAs) like G-Mail perform client-side rendering to generate content. SPAs deliver amazing user experiences, but search engine bots cannot reliably crawl and index their content.
That's where static site generation comes in.
Static site generation (SSG) pre-generates content as plain HTML at build time. Software engineers like Maksim Ivanov and Alexander Bespoyasov use SSG to create fast, content-driven web applications at companies like Spotify.
SSG generates the HTML in advance just once. When a user visits a website built with this strategy, the browser can immediately render and serve the content without waiting for any data from APIs.
Let me show you how to build a statically generated application with Next.js:
Next.js is a React framework for building production-grade applications. It pre-renders parts of or the entirety of a web application via:
- Server-Side Rendering (SSR)
- Incremental Static Regeneration (ISR)
- Static Site Generation (SSG)
Here's how to get started
1. Create a new Next.js application using create-next-app. Like create-react-app, create-next-app bootstraps a new project. The project automatically comes with React, TypeScript and Next.js installed and pre-configured.
Next.js provides several CLI commands for handling different stages of the development process:
- dev - Runs a development environment.
- build - Builds the application and generates rendered pages.
- start - Starts the application with production environment settings.
2. Spin up a development server for the Next.js project. Visit localhost:3000 in a browser to preview and interact with the application.
3. Create a new page that displays some of the most recent top stories on Hacker News.
By exporting a function called `getStaticProps`, Next.js pre-renders the page at build time. Any data that's fetched within this function can be made available to the page via props.
By fetching data at build time, we lighten the browser's burden during the initial page load.
To access this new page, visit localhost:3000/hackernews in a browser. DevTools shows zero API requests being sent. Plus, the initial HTML document contains the Hacker News stories.
Conveniently, Next.js's file-system based router automatically handles routing and defines a route for any file that's added to the pages directory.
- pages/index.tsx corresponds to /.
- pages/hackernews/index.tsx corresponds to /hackernews.
4. Compile the application and generate rendered pages. Next.js creates an optimized version of the application that's made for production.
5. Start the application with production environment settings.
For maximum reach and even greater performance, export the entire application to static HTML.
This lets you publish and deploy the application to the edge (e.g., Cloudflare Pages). This means no more Node.js servers.
By distributing the application across nodes all throughout the world, users from anywhere in the world can instantly visit your application.
We've only scratched the surface of what Next.js is capable of.
To learn more advanced Next.js techniques, check out Maksim Ivanov and Alexander Bespoyasov's Fullstack React with TypeScript Masterclass. Learn TypeScript patterns with React additional ecosystem advice (testing, redux, SSR) by building several apps including a Trello clone, a Medium-like website, testing with a digital-item e-comm app, and more! Fullstack React with TypeScript Masterclass.