Search⌘ K
AI Features

Statically Generated Page with No Data

Explore the process of creating a statically generated page in Next.js without relying on data fetching. Learn how adding a simple file in the pages directory automatically sets up routing, how to use the Head component for page metadata and SEO, and how to include styles using CSS. This lesson helps you build foundational knowledge in static page creation essential for fast, optimized React applications.

Creating a page

Making a new page for a Next.js app is a straightforward process. All you have to do is add a file to the pages directory.

Pages Directory
Pages Directory

You will create a page called “about”. The first thing to do is create the about.jsx file.

Pages Directory with about.jsx
Pages Directory with about.jsx

Now, all you have to do is create a function that is exported.

JavaScript (JSX)
export default function About (){
return(
<div className="container">
<h1>About</h1>
</div>
)
}

By going to ...