Repository pattern for data access in NextJS

Introduction

The repository pattern helps organize how your app talks to data sources. It keeps data access code in one place, making your app easier to manage and change.

When you want to keep your data fetching logic separate from UI code.

When you might switch data sources later, like from a local file to a database.

When you want to reuse data access code in different parts of your app.

When you want to make testing easier by mocking data access.

When your app grows and data handling becomes more complex.

Syntax

NextJS

class Repository {
  async getAll() {
    // fetch all items
  }

  async getById(id) {
    // fetch one item by id
  }

  async create(data) {
    // add new item
  }

  async update(id, data) {
    // update item by id
  }

  async delete(id) {
    // delete item by id
  }
}

This is a simple class with methods to get, add, update, and delete data.

Each method is async because data fetching usually takes time.

Examples

A repository class fetching all users from an API endpoint.

NextJS

class UserRepository {
  async getAllUsers() {
    return fetch('/api/users').then(res => res.json())
  }
}

Fetches a single product by its ID using a dynamic URL.

NextJS

class ProductRepository {
  async getProductById(id) {
    return fetch(`/api/products/${id}`).then(res => res.json())
  }
}

Creates a new todo item by sending a POST request with JSON data.

NextJS

class TodoRepository {
  async createTodo(todo) {
    return fetch('/api/todos', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(todo)
    }).then(res => res.json())
  }
}

Sample Program

This React component uses a UserRepository class to get user data. It shows a list of user names after fetching them asynchronously.

The repository hides the data fetching details from the component, keeping code clean.

NextJS

import React, { useEffect, useState } from 'react'

class UserRepository {
  async getAllUsers() {
    // Simulate fetching data
    return new Promise(resolve => {
      setTimeout(() => {
        resolve([
          { id: 1, name: 'Alice' },
          { id: 2, name: 'Bob' }
        ])
      }, 500)
    })
  }
}

export default function UserList() {
  const [users, setUsers] = useState([])
  const repo = new UserRepository()

  useEffect(() => {
    repo.getAllUsers().then(data => setUsers(data))
  }, [])

  return (
    <main>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </main>
  )
}

Important Notes

Keep repository methods focused on data access only, not UI logic.

Use async/await or promises to handle asynchronous data fetching.

Repositories make it easier to change data sources without changing UI code.

Summary

The repository pattern organizes data access in one place.

It helps keep UI code clean and easier to maintain.

Use it when you want reusable, testable, and flexible data handling.

Practice

1. What is the main purpose of using the Repository pattern in a Next.js application?

easy

A. To style components with CSS modules

B. To organize data access in one place for cleaner and reusable code

C. To handle routing between pages

D. To manage component state with hooks

Solution

1. Step 1: Understand the role of the Repository pattern

   The Repository pattern centralizes data access logic, separating it from UI code.

2. Step 2: Identify benefits in Next.js context

   This separation makes code cleaner, reusable, and easier to maintain.

3. Final Answer:

   To organize data access in one place for cleaner and reusable code -> Option B

4. Quick Check:

   Repository pattern = centralized data access [OK]

Hint: Repository pattern centralizes data access, not UI or styling [OK]

Common Mistakes:

• Confusing repository with UI state management
• Thinking repository handles routing
• Mixing repository with styling concerns

2. Which of the following is the correct way to define a simple repository class in Next.js using TypeScript?

easy

A. class UserRepository { async getAll() { return fetch('/api/users').then(res => res.json()) } }

B. function UserRepository() { return fetch('/api/users') }

C. const UserRepository = () => fetch('/api/users').json()

D. class UserRepository { getAll() { return fetch('/api/users').json() } }

Solution

1. Step 1: Check class syntax and async usage

   class UserRepository { async getAll() { return fetch('/api/users').then(res => res.json()) } } correctly defines a class with an async method returning parsed JSON from fetch.

2. Step 2: Identify errors in other options

   function UserRepository() { return fetch('/api/users') } is a function, not a class. const UserRepository = () => fetch('/api/users').json() incorrectly calls .json() directly on fetch result without awaiting. class UserRepository { getAll() { return fetch('/api/users').json() } } misses async and awaits, causing runtime error.

3. Final Answer:

   class UserRepository { async getAll() { return fetch('/api/users').then(res => res.json()) } } -> Option A

4. Quick Check:

   Async class method with fetch and json parsing = class UserRepository { async getAll() { return fetch('/api/users').then(res => res.json()) } } [OK]

Hint: Repository methods fetching data must be async and parse JSON [OK]

Common Mistakes:

• Forgetting async keyword on methods
• Calling .json() without awaiting fetch response
• Using function instead of class for repository

3. Given this repository method in Next.js, what will console.log(users) output?

class UserRepository {
  async getAll() {
    return [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]
  }
}

const repo = new UserRepository()
const users = await repo.getAll()
console.log(users)

medium

A. [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]

B. Promise { <pending> }

C. undefined

D. Error: await is only valid in async function

Solution

1. Step 1: Analyze the getAll method

   getAll returns a resolved array of user objects immediately (no fetch or delay).

2. Step 2: Understand await usage

   Await unwraps the Promise returned by async getAll, so users is the array itself.

3. Final Answer:

   [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }] -> Option A

4. Quick Check:

   Await unwraps async return value = array [OK]

Hint: Await unwraps async method result to actual data [OK]

Common Mistakes:

• Thinking users is a Promise object
• Forgetting await causes Promise logged
• Assuming undefined without return

4. Identify the error in this Next.js repository code snippet:

class ProductRepository {
  getAll() {
    const response = fetch('/api/products')
    return response.json()
  }
}

medium

A. json() method does not exist on response

B. fetch URL is incorrect

C. Missing async keyword and await for fetch and json calls

D. Class name should be lowercase

Solution

1. Step 1: Check fetch usage

   fetch returns a Promise, so response is a Promise, not the actual response object.

2. Step 2: Identify missing async/await

   To get JSON data, method must be async and await fetch and response.json() calls.

3. Final Answer:

   Missing async keyword and await for fetch and json calls -> Option C

4. Quick Check:

   Async fetch requires await to get response data [OK]

Hint: Always use async/await with fetch and response.json() [OK]

Common Mistakes:

• Not marking method async
• Not awaiting fetch or json()
• Assuming fetch returns data synchronously

5. You want to create a repository in Next.js that fetches user data and caches it to avoid repeated API calls. Which approach correctly applies the repository pattern with caching?

hard

A. class UserRepository {
async getAll() {
return fetch('/api/users').then(res => res.json())
}
}

B. function getAllUsers() {
return fetch('/api/users').then(res => res.json())
}

C. const cache = []
async function getAllUsers() {
if (cache.length) return cache
const res = await fetch('/api/users')
cache.push(...await res.json())
return cache
}

D. class UserRepository {
cache = null
async getAll() {
if (this.cache) return this.cache
const res = await fetch('/api/users')
this.cache = await res.json()
return this.cache
}
}

Solution

1. Step 1: Understand caching in repository context

   Caching should be encapsulated inside the repository class to keep data access logic together.

2. Step 2: Evaluate options for caching implementation

   class UserRepository { cache = null async getAll() { if (this.cache) return this.cache const res = await fetch('/api/users') this.cache = await res.json() return this.cache } } uses a class property to store cache and returns it if available, avoiding repeated fetch calls.

3. Step 3: Compare other options

   Options A and B do not implement caching. const cache = [] async function getAllUsers() { if (cache.length) return cache const res = await fetch('/api/users') cache.push(...await res.json()) return cache } uses an external cache variable, breaking encapsulation.

4. Final Answer:

   class UserRepository { cache = null async getAll() { if (this.cache) return this.cache const res = await fetch('/api/users') this.cache = await res.json() return this.cache } } -> Option D

5. Quick Check:

   Repository with internal cache property = class UserRepository { cache = null async getAll() { if (this.cache) return this.cache const res = await fetch('/api/users') this.cache = await res.json() return this.cache } } [OK]

Hint: Cache inside repository class to keep data logic together [OK]

Common Mistakes:

• Caching outside repository breaks encapsulation
• Not checking cache before fetching
• Using functions instead of class for caching