Quickstarters
How to Build a Basic CRUD App with Next.js?

49min
Introduction
In this guide, we’ll walk through building a complete CRUD (create, read, update, delete) application using Next.js for your frontend, paired with Back4app as your backend solution. 
You'll set up a project named Basic-CRUD-App-NextJS, design a dynamic database schema, and integrate robust CRUD functionality into your Next.js app.
We will cover everything from configuring your Back4app project and designing collections to connecting your Next.js interface using the Parse SDK or REST/GraphQL methods. 
By the end, you’ll have a production-ready web application with secure user authentication and efficient data management.
Key Takeaways
Build a full CRUD application with Next.js and Back4app.
Learn to design a flexible backend schema tailored to your data needs.
Utilize an intuitive, drag-and-drop Admin interface for data management.
Discover best practices for deployment, including Docker containerization and GitHub integration.
﻿
Prerequisites
Before you begin, ensure you have:
A Back4app account with a new project set up.
For guidance, refer to Getting Started with Back4app.
A Next.js development environment.
Use Create Next App or a similar tool. Make sure Node.js (version 14 or later) is installed.
A basic understanding of JavaScript, Next.js, and API integrations.
Visit the Next.js documentation for an overview if needed.
﻿
Step 1 – Setting Up Your Project
Initiate a New Back4app Project
Log in to your Back4app account.
Click the “New App” button on your dashboard.
Enter the project name: Basic-CRUD-App-NextJS and follow the prompts.
Create New Project
﻿
Your new project appears in the dashboard, serving as the core for your backend.
Create Your Next.js Application
Open your terminal and run:
Bash
npx create-next-app@latest basic-crud-app-nextjs
npx create-next-app@latest basic-crud-app-nextjs
﻿
Change to your project directory:
Bash
cd basic-crud-app-nextjs
cd basic-crud-app-nextjs
﻿
This command sets up a Next.js project framework ready for customization.
﻿
Step 2 – Crafting Your Database Schema
Structuring Your Data Model
For this CRUD app, you will create essential collections. Below are two primary collections with field details that enable the core functionalities.
1. Items Collection
This collection stores details about each item.
Field
Data Type
Description
_id
ObjectId
Auto-generated unique identifier.
title
String
The item’s name or title.
description
String
A brief summary of the item.
created_at
Date
Timestamp when the item is created.
updated_at
Date
Timestamp for the latest update.
2. Users Collection
This collection handles user profiles and authentication data.
Field
Data Type
Description
_id
ObjectId
Auto-generated unique identifier.
username
String
Unique username for the user.
email
String
Unique email address.
password_hash
String
Securely hashed password for user authentication.
created_at
Date
Timestamp when the account was created.
updated_at
Date
Timestamp for the last account update.
You can manually define these collections in the Back4app dashboard by creating a new class for each collection and adding the relevant columns.
Create New Class
﻿
Create fields by choosing the appropriate data type, naming the column, and setting defaults or requirements.
Create Column
﻿
﻿
Using the Back4app AI Assistant for Schema Setup
The Back4app AI Assistant streamlines database schema generation. Describe your desired collections and fields, and let the assistant auto-generate the structure.
Steps to Use the AI Assistant:
Open the AI Assistant:
Find it in your Back4app dashboard menu.
Describe Your Data Model:
Paste a detailed prompt outlining your collections and field requirements.
Review and Apply:
Check the generated schema and implement it in your project.
Sample Prompt
Text
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
This method not only saves time but also ensures your schema is consistent and optimized.
﻿
Step 3 – Activating the Admin Interface & CRUD Features
Exploring the Admin Interface
The Back4app Admin Interface offers a no-code solution to manage your backend data. With its intuitive drag-and-drop system, you can easily perform CRUD operations.
Enabling the Admin Interface
Navigate to the “More” section in your Back4app dashboard.
Click on “Admin App” then select “Enable Admin App.”
Configure your admin credentials by setting up your first admin user. This also establishes roles like B4aAdminUser and necessary system collections.
Enable Admin App
﻿
After activation, log in to the Admin Interface to begin managing your data.
Admin App Dashboard
﻿
Executing CRUD Operations via the Admin Interface
Within the Admin Interface you can:
Create Records: Use the “Add Record” button in a collection (e.g., Items) to insert new data.
View or Update Records: Click on a record to inspect or modify its fields.
Delete Records: Use the delete option to remove obsolete entries.
This streamlined interface makes data management straightforward and efficient.
﻿
Step 4 – Connecting Next.js to Back4app
With your backend set up, the next step is to connect your Next.js application.
Option A: Using the Parse SDK
Install the Parse SDK:
Bash
npm install parse
npm install parse
﻿
Initialize Parse in Your Next.js App:
Create a file (e.g., lib/parseConfig.js):
JS
// lib/parseConfig.js
import Parse from 'parse';

// Replace with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// lib/parseConfig.js
import Parse from 'parse';

// Replace with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
Integrate Parse in a Next.js Page:
For example, create a page to fetch and display items.
JS
// pages/index.js
import { useEffect, useState } from 'react';
import Parse from '../lib/parseConfig';

export default function Home() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const loadItems = async () => {
      const Items = Parse.Object.extend('Items');
      const query = new Parse.Query(Items);
      try {
        const results = await query.find();
        setItems(results);
      } catch (error) {
        console.error('Error retrieving items:', error);
      }
    };
    loadItems();
  }, []);

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Item List</h1>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            <strong>{item.get('title')}</strong> - {item.get('description')}
          </li>
        ))}
      </ul>
    </div>
  );
}
// pages/index.js
import { useEffect, useState } from 'react';
import Parse from '../lib/parseConfig';

export default function Home() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const loadItems = async () => {
      const Items = Parse.Object.extend('Items');
      const query = new Parse.Query(Items);
      try {
        const results = await query.find();
        setItems(results);
      } catch (error) {
        console.error('Error retrieving items:', error);
      }
    };
    loadItems();
  }, []);

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Item List</h1>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            <strong>{item.get('title')}</strong> - {item.get('description')}
          </li>
        ))}
      </ul>
    </div>
  );
}
﻿
Option B: Using REST or GraphQL
If you prefer not to use the Parse SDK, you can manage CRUD operations with REST or GraphQL. For example, to fetch items via REST:
JS
const fetchItems = async () => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Items fetched:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};

fetchItems();
const fetchItems = async () => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Items fetched:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};

fetchItems();
﻿
Integrate these API calls into your Next.js components as needed.
﻿
Step 5 – Securing Your Backend
Implementing Access Control Lists (ACLs)
Secure your data by assigning ACLs to objects. For instance, to create an item that only its owner can access:
JS
async function addPrivateItem(itemDetails, owner) {
  const Items = Parse.Object.extend('Items');
  const newItem = new Items();
  newItem.set('title', itemDetails.title);
  newItem.set('description', itemDetails.description);

  // Configure ACL: owner-only read and write
  const acl = new Parse.ACL(owner);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  newItem.setACL(acl);

  try {
    const savedItem = await newItem.save();
    console.log('Private item added:', savedItem);
  } catch (error) {
    console.error('Error adding item:', error);
  }
}
async function addPrivateItem(itemDetails, owner) {
  const Items = Parse.Object.extend('Items');
  const newItem = new Items();
  newItem.set('title', itemDetails.title);
  newItem.set('description', itemDetails.description);

  // Configure ACL: owner-only read and write
  const acl = new Parse.ACL(owner);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  newItem.setACL(acl);

  try {
    const savedItem = await newItem.save();
    console.log('Private item added:', savedItem);
  } catch (error) {
    console.error('Error adding item:', error);
  }
}
﻿
Configuring Class-Level Permissions (CLPs)
Within the Back4app dashboard, adjust the CLPs for each collection to restrict data access to authorized users only.
﻿
Step 6 – Implementing User Authentication
Setting Up User Accounts
Back4app leverages Parse’s built-in User class for authentication. In your Next.js app, manage registration and login as shown below:
JS
// pages/signup.js
import { useState } from 'react';
import Parse from '../lib/parseConfig';

export default function SignUp() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const registerUser = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('Registration successful!');
    } catch (error) {
      alert('Registration failed: ' + error.message);
    }
  };

  return (
    <form onSubmit={registerUser}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Register</button>
    </form>
  );
}
// pages/signup.js
import { useState } from 'react';
import Parse from '../lib/parseConfig';

export default function SignUp() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const registerUser = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('Registration successful!');
    } catch (error) {
      alert('Registration failed: ' + error.message);
    }
  };

  return (
    <form onSubmit={registerUser}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Register</button>
    </form>
  );
}
﻿
A similar approach can be used for login and session management. You can also enable additional features such as social logins, email verification, and password recovery via the Back4app dashboard.
﻿
Step 7 – Deploying Your Next.js Frontend
Back4app’s deployment options allow you to host your Next.js application effortlessly, whether through GitHub integration or Docker containerization.
7.1 Building Your Production Version
Open your project directory in the terminal.
Run the build command:
Bash
npm run build
npm run build
﻿
This generates a .next folder containing optimized static and server-rendered files.
﻿
7.2 Organizing and Uploading Your Code
Your repository should contain all source files for your Next.js app. A typical structure might be:
Text
basic-crud-app-nextjs/
├── node_modules/
├── pages/
│   ├── index.js
│   └── signup.js
├── lib/
│   └── parseConfig.js
├── public/
│   └── favicon.ico
├── package.json
└── README.md
basic-crud-app-nextjs/
├── node_modules/
├── pages/
│   ├── index.js
│   └── signup.js
├── lib/
│   └── parseConfig.js
├── public/
│   └── favicon.ico
├── package.json
└── README.md
﻿
Example: lib/parseConfig.js
JS
// lib/parseConfig.js
import Parse from 'parse';

// Insert your Back4app credentials here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// lib/parseConfig.js
import Parse from 'parse';

// Insert your Back4app credentials here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
Example: pages/index.js
(Refer to the code snippet provided in Step 4)
Committing Your Code to GitHub
Initialize a Git repository:
Bash
git init
git init
﻿
Add all files:
Bash
git add .
git add .
﻿
Commit your changes:
Bash
git commit -m "Initial commit of Next.js CRUD application"
git commit -m "Initial commit of Next.js CRUD application"
﻿
Create a GitHub repository:
For example, name it basic-crud-app-nextjs.
Push your code:
Bash
git remote add origin https://github.com/your-username/basic-crud-app-nextjs.git
git push -u origin main
git remote add origin https://github.com/your-username/basic-crud-app-nextjs.git
git push -u origin main
﻿
﻿
7.3 Integrating with Back4app Web Deployment
Access Web Deployment:
Log in to your Back4app dashboard, navigate to your project, and select the Web Deployment feature.
Connect your GitHub account:
Follow the prompts to link your repository.
Select Your Repository and Branch:
Choose the repository (e.g., basic-crud-app-nextjs) and the branch (e.g., main) containing your code.
﻿
7.4 Configuring Deployment Settings
Build Command:
If your repository does not include a pre-built .next folder, specify the command (e.g., npm run build).
Output Directory:
Set the output directory to .next so that Back4app knows where your compiled files reside.
Environment Variables:
Add any necessary environment variables, such as API keys.
﻿
7.5 Containerizing Your Next.js Application with Docker
If you prefer Docker for deployment, include a Dockerfile in your repository:
Dockerfile
# Use an official Node runtime as the base image
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the source code
COPY . .

# Build the Next.js application
RUN npm run build

# Use Nginx to serve the built app
FROM nginx:stable-alpine
COPY --from=build /app/.next /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node runtime as the base image
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the source code
COPY . .

# Build the Next.js application
RUN npm run build

# Use Nginx to serve the built app
FROM nginx:stable-alpine
COPY --from=build /app/.next /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Select the Docker deployment option in Back4app to containerize and deploy your application.
﻿
7.6 Launching Your Application
Deploy Your App:
Click the Deploy button in Back4app.
Monitor the Build Process:
Back4app will fetch your code, execute the build command, and deploy your application.
Access Your Live App:
Once deployment completes, a URL will be provided where your Next.js application is hosted.
﻿
7.7 Verifying Your Deployment
Visit the Provided URL:
Open the URL in your browser.
Test Functionality:
Ensure that your pages load correctly and that all CRUD operations are working.
Troubleshoot if Necessary:
Use browser developer tools and Back4app logs to diagnose any issues.
﻿
Step 8 – Conclusion and Next Steps
Congratulations! You have successfully built a robust CRUD application with Next.js and Back4app. You configured your project, designed tailored collections, and connected your Next.js frontend with a secure backend.
Next Steps:
Enhance Your Frontend:
Expand your Next.js app with advanced features like detailed views, search functionality, or real-time updates.
Augment Your Backend:
Explore Cloud Functions, third-party integrations, or additional access controls.
Keep Learning:
Visit the Back4app documentation and Next.js resources for further optimization and customization.
By following this tutorial, you now possess the skills to create a scalable and secure CRUD application using Next.js and Back4app. Happy coding!
Field	Data Type	Description
_id	ObjectId	Auto-generated unique identifier.
title	String	The item’s name or title.
description	String	A brief summary of the item.
created_at	Date	Timestamp when the item is created.
updated_at	Date	Timestamp for the latest update.
Field	Data Type	Description
_id	ObjectId	Auto-generated unique identifier.
username	String	Unique username for the user.
email	String	Unique email address.
password_hash	String	Securely hashed password for user authentication.
created_at	Date	Timestamp when the account was created.
updated_at	Date	Timestamp for the last account update.
Updated 18 Feb 2025
Did this page help you?
How to Build a Basic CRUD App with PHP?
How to Build a Basic CRUD App with Angular?