Skip to main content

Quickstart: Next.js

Introduction

This article will cover how to code simple CRUD operations in a todo app using Next.js, and Altogic. You can check out the demo.

What are the features of the todo app?

  1. Create todos

  2. Update todos

  3. Delete todos

  4. Read todos

Set up the backend

Create App

We can create an app with the Altogic Designer. To create an app via the Designer:

  1. Log in to Altogic with your credentials.

  2. Select New app.

  3. In the App Name field, enter a name for the app.

  4. And click Next.

  1. Choose Blank App template, and click on Next.

  2. Click Create on the “Confirm & create” tab.

Here, you can customize your subdomain, but not necessarily to do, Altogic automatically creates one for you, your envUrl. You don’t need to worry if you lost your envUrl; you can get it from the Environments view of Designer.

Get Environment Url

After creating our app, we need envUrl and clientKey to access our app via Altogic Client Library to create a web application.

To get the clientKey we need to enter the app which we have created before and;

  1. Click on App Settings at the left-bottom of the Designer.

  2. And click on the Client library keys section.

Get Client Key

We can create new clientKey from that page, but thanks to Altogic for creating one clientKey automatically for us, so let’s copy the existing clientKey from the list.

Create todo model

  1. Click on Models on the left sidebar.

  2. Click New on the right of the screen and select model.

  3. Set model name as todo

  4. Ensure that Enable timestamps are selected to store the creation date of the blog post.

  5. Click Next.

Altogic provides basic CRUD endpoints and services with the related model by default when you create a new model. Since we use Altogic Client Library, we won’t use these endpoints. Unselect all endpoints and click Create.

We created our first model, ”todo”. We have to define the model properties name, dateTime for the due date, and status. Since we created the todo model, we should define the name property as Text, dateTime as Date-time, and the status as Boolean.

  1. Click on the todo model on the Models page.

  2. Click on New Field on the right-top of the page.

  3. Select Text Field→ Text.

  4. Set model name name.

  5. Ensure that the Required field is selected.

  6. Click Create.

  1. Click on New Field on the right-top of the page.

  2. Select Boolean.

  3. Set model name status.

  4. Ensure that the Required field is selected.

  5. Set default value expression false.

  1. Click on New Field on the right-top of the page.

  2. Select Date-time.

  3. Set model name dateTime.

  4. Ensure that the Required field is selected.

  5. Set default value expression DATEADD(NOW(),5).

We completed the database design and the model definition on Altogic. Let’s move on to the front-end development.

Set up the front-end

Initialize a Next.js app

We can use create-next-app​to initialize a Next.js app:

npx create-next-app quickstart-todo

Then, install the Altogic package.

cd quickstart-todo
npm install altogic

Set up the environment variables

Environment variables are used to secure your secret keys, reuse them in different places and reduce production mistakes. Create a .env.localfile in the root directory of your application, open the file in your editor and paste the following. You can check more about environment variables in Next.js here.

NEXT_PUBLIC_ALTOGIC_ENV_URL=YOUR-APPLICATION-ENV-URL
NEXT_PUBLIC_ALTOGIC_CLIENT_KEY=YOUR-APPLICATION-CLIENT-KEY

Replace YOUR-APPLICATION-ENV-URL and YOUR-APPLICATION-CLIENT-KEY with the envUrl and clientKey values you retrieved while setting up your backend.

Next, create a file to create the Altogic Client Library instance.

mkdir helpers
cd helpers
touch altogic.js

This creates a altogic.js file in the helpers directory. Open the file in your editor and paste the following.

import { createClient } from "altogic";

export const altogic = createClient(
process.env.NEXT_PUBLIC_ALTOGIC_ENV_URL,
process.env.NEXT_PUBLIC_ALTOGIC_CLIENT_KEY
);

Here, you need to enter the envUrl and clientKey.

Now, install Tailwind CSS and create tailwind.config.js

cd ../
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Add the paths to all of your template files in your tailwind.config.js file.

module.exports = {
mode: "JIT",
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
variants: {
extend: {},
},
};

Add the following directives to your globals.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

How to fetch todos

Inside your useEffect() hook, send a get request to Altogic using altogic.db.model(modelName).get() function of Altogic Client Library. Then, set the data you fetched inside the todos state.

const [todos, setTodos] = useState([]);

useEffect(() => {
const fetchData = async () => {
const { data, errors } = await altogic.db.model("todo").limit(100).get();
if (data) {
setTodos(data);
} else {
console.log(errors);
}
};
fetchData();
}, []);

How to add todo

Implement a function called handleAddTodo to send a request to Altogic for creating objects using altogic.db.model(modelName).create({...}) function of Altogic Client Library. Then, add the object you just created to todos state using setTodos.

 const [todoName, setTodoName] = useState("");

const handleAddTodo = async (todoName) => {
try {
const { data, errors } = await altogic.db.model("todo").create({
name: todoName,
});
if (data) {
setTodoName("");
setTodos([...todos, data]);
} else {
console.log(errors);
}
} catch (error) {
console.log(error);
}
};

How to toggle todo status

We need to be able to update the status of our todos. We will implement a function called toggleTodo to send an update request to Altogic for updating objects using altogic.db.model(modelName).object(objectId).update({...}) function of Altogic Client Library. Then, we will update the todo in the todos state by iterating the array.

const toggleTodo = async (todo) => {
try {
const { data, errors } = await altogic.db
.model("todo")
.object(todo._id)
.update({
status: !todo.status,
});
if (data) {
setTodos(
todos.map((element) => {
if (element._id === todo._id) {
element = data;
}
return element;
})
);
} else {
console.log(errors);
}
} catch (error) {
console.log(error);
}
};

How to delete todo

We might also want to delete our todos. We will implement a function called handleDeleteTodo to send a delete request to Altogic for deleting objects using altogic.db.model(modelName).object(objectId).delete() function of Altogic Client Library. Then, we will delete the todo in the todos state by filtering the array.


const handleDeleteTodo = async (todo) => {
try {
const { data, errors } = await altogic.db
.model("todo")
.object(todo._id)
.delete();
if (errors) {
console.log(errors);
} else {
setTodos(todos.filter((element) => element._id !== todo._id));
}
} catch (error) {
console.log(error);
}
};

You can run your project by typing npm run dev on the root directory of the project! You can check the GitHub repository for the rest of the code. You can also clone it and build your app on top of it.