---
title: How to Load Data from a File in Next.js
description: Learn how to display and read the contents of a static json file in your Next.js application.
url: /kb/guide/loading-static-file-nextjs-api-route
canonical_url: "https://vercel.com/kb/guide/loading-static-file-nextjs-api-route"
published: 2025-11-03
last_updated: 2025-11-10
authors: Lee Robinson
related:
  - /docs/frameworks/nextjs
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---
<!-- docsgraph:related -->
## Related pages

> **For AI agents:** Follow these links to understand how this page connects to the rest of the Vercel ecosystem. For the full cross-link map (inbound, outbound, prerequisites, and semantic neighbors), see the .graph.md link below.

- [Data Fetching](https://nextjs.org/docs/pages/building-your-application/data-fetching?from=related) — Next.js allows you to fetch data in multiple ways, with prerendering, server-side rendering or static-site generation, a
- [Serving Static Files](https://vercel.com/docs/platforms/multi-tenant-platforms/serving-static-files?from=related) — Serve tenant-specific static files like robots.txt, sitemap.xml, and llms.txt dynamically using route handlers.
- [Videos](https://nextjs.org/docs/app/guides/videos?from=related) — Recommendations and best practices for optimizing videos in your Next.js application.
- [Linking and Navigating](https://nextjs.org/docs/app/getting-started/linking-and-navigating?from=related) — Learn how the built-in navigation optimizations work, including prefetching, prerendering, and client-side navigation, a
- [Public pages](https://nextjs.org/docs/app/guides/public-static-pages?from=related) — Learn how to build public, "static" pages that share data across users, such as landing pages, list pages (products, blo
- [Custom Server](https://nextjs.org/docs/pages/guides/custom-server?from=related) — Start a Next.js app programmatically using a custom server.
- [How can I use files in Vercel Functions?](https://vercel.com/kb/guide/how-can-i-use-files-in-serverless-functions?from=related) — Learn how to import files inside Serverless Functions on Vercel.

Full cross-link map for this page: [/kb/guide/loading-static-file-nextjs-api-route.graph.md](/kb/guide/loading-static-file-nextjs-api-route.graph.md)
<!-- /docsgraph:related -->


This guide will show how to read a JSON file inside a [Next.js application](https://vercel.com/docs/frameworks/nextjs) and display its data.

## Step 1. Import Required Libraries

First, we need to import the file system library from Node.js, which we'll use to read our file.

```jsx
import { promises as fs } from 'fs';
```

## Step 2: Create a Server Component

In Next.js, create a new [Server Component](https://nextjs.org/docs/app/building-your-application/rendering/server-components), which is the default in the [App Router](https://nextjs.org/docs/app).

This component is rendered entirely on the server, which allows for securely fetching data such as JSON files or talking directly to your database.

```jsx
import { promises as fs } from 'fs';

export default async function Page() {
  //...
}
```

## Step 3: Read the File

Next, we'll read the file. In this case, we're reading a JSON file. We use the `readFile` function from the `fs` library. We also use the `process.cwd` function to get the current working directory, and append the relative path to our file.

```jsx
import { promises as fs } from 'fs';

export default async function Page() {
  const file = await fs.readFile(process.cwd() + '/app/data.json', 'utf8');
  //...
}
```

The `'utf8'` argument tells Node to interpret the file as a UTF-8 encoded text file. The example JSON file we're reading at `app/data.json` looks as follows:

```json
{
  "title": "My Title",
  "content": "Lorem Ipsum"
}
```

## Step 4: Use The JSON Data

Now, we'll parse the file's contents. The `readFile` function returns the contents as a string, so we use `JSON.parse` to turn it into an object. Finally, we use the data in our Server Component.

```jsx
import { promises as fs } from 'fs';

export default async function Page() {
  const file = await fs.readFile(process.cwd() + '/app/data.json', 'utf8');
  const data = JSON.parse(file);

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}
```

Now, whenever you visit this page, Next.js will load the data from the file, and display it on the page.

## App Router and Colocation

The Next.js App Router supports [colocation](https://nextjs.org/docs/app/building-your-application/routing/colocation) of your project files. This means you can safely organize your project files inside route segments in the App Router without accidentally making them routable. Even though route structure is defined through folders, a route is not publicly accessible until a `page.js` or `route.js` file is added to a route segment.