What is `getStaticProps`?

getStaticProps is a special function in Next.js that loads data on the server at project build time, rather than on every user request.

It is used in the Pages Router (the older but still supported approach in Next.js).

---

#The main idea

getStaticProps tells Next.js the following:

"Take this data once, at build time, generate the HTML in advance, and then just serve it to all users"

As a result, the page becomes static.

---

#How it works, step by step

1. You run the project build (build)
2. Next.js executes getStaticProps on the server
3. Inside the function, data is loaded (API, database, files)
4. Next.js generates HTML with that data
5. The HTML is saved as a ready file
6. Users receive that file without computations or requests

Important: getStaticProps never runs in the browser

---

#Example logic (no code)

Imagine a blog:

• there is an article page
• article data comes from a CMS
• articles rarely change

With getStaticProps:

• all articles are loaded at build time
• every page is already ready
• the user gets it instantly

---

#What you can do inside getStaticProps

You can:

• call an API
• read data from a database
• use secret keys
• work with the file system

You cannot:

• use window
• work with the user's cookies
• fetch data that depends on a specific user

Because:

• the build happens without a user
• one HTML for everyone

---

#Why getStaticProps is needed

It solves these tasks:

• maximum loading speed
• excellent SEO
• minimal server load
• simple architecture

It is ideal for:

• blogs
• landing pages
• documentation
• catalogs
• marketing pages

---

#Data updates (revalidation)

Although data is loaded at build time, it can be updated:

• the page stays static
• but the server can rebuild it at a given interval
• users get a fresh version without a full project rebuild

This allows you to:

• keep the speed
• while not "freezing" the data forever

---

#An important point

getStaticProps:

• does not work in the App Router
• is not suited for personal data
• is used only in the Pages Router

In the App Router, its role is performed by:

• server components
• fetch with caching and revalidation

---

#In short

getStaticProps is:

• server-side data loading
• once, at build time
• with generation of ready HTML
• for maximally fast and stable pages