Skip to main content

Create a notes app with Squid, Next.js, and Netlify

Use Squid as a backend to build a full-stack notes app deployed on Netlify.​

Squid and Netlify

What you'll build:​

  • A notes application that uses Squid Cloud and Next.js running on Netlify.
  • The app uses Squid's built-in database, making it quick to set up and run.

What you'll learn:​

  • Querying and rendering data both on the server and the client while keeping it up-to-date in real time.
  • Mutating data on the client.
  • Configuring the Squid Client SDK to work with Netlify environment variables.

You'll need some experience with TypeScript. Experience with Next.js and Netlify is useful, but not required.

Environment setup​

  1. Install the Squid CLI using the following command:
npm install -g @squidcloud/cli
  1. Download the notes-app code sample:
    2. squid init-sample notes-app --template notes-app
    Open the project in the IDE of your choice.
  1. Install the Netlify CLI using the following command:
npm install -g netlify-cli

Set up the Squid backend​

There are two subfolders that make up the notes-app project: frontend and backend. The backend folder contains the Squid backend for the app.

  1. Navigate to the Squid Cloud Console and create a new application named notes-app.
  1. In the Squid Cloud Console, navigate to the application overview page and scroll to the Backend project section. Click Create .env file and copy the command.

Copy Env Command

  1. In the terminal, change to the backend directory:
cd backend
  1. Create the .env file using the command you copied from the console. The command has the following format:
squid init-env \
--appId YOUR_APP_ID \
--apiKey YOUR_API_KEY \
--environmentId dev \
--squidDeveloperId YOUR_SQUID_DEVELOPER_KEY \
--region us-east-1.aws
  1. Install the required dependencies:
npm install

The backend is now set up and ready to use with a frontend!

Configure the Next.js frontend​

The following steps add configuration parameters to connect the application to Squid and Next.js.

  1. Open a new terminal window and navigate to the notes app frontend. You should now have two open terminal windows: one for the app's backend and one for the frontend.
cd notes-app/frontend
  1. Install the required dependencies:
npm install
  1. Create the Netlify project:
netlify sites:create
  1. Create a .env.local file:
touch .env.local
  1. Add the following code to the .env.local file, replacing the placeholder with your Squid developer ID. You can find the ID in the .env file of your backend and in the Squid Cloud Console.
.env.local
SQUID_DEVELOPER_ID=YOUR_SQUID_DEVELOPER_ID
  1. Open the netlify.toml file. Replace the placeholder with your app ID. The app ID is found in the .env file of your backend and in the Squid Cloud Console.
netlify.toml
...
SQUID_APP_ID = "YOUR_APP_ID"
...

Check out the notes app components​

Notes App Components

The notes app has three main components that manage the app's appearance and behavior:

  • NoteItem - Display each note in the list of notes.
  • NoteList - Renders the list of notes and shows the NoteModal component when a user adds a new note or updates an existing note.
  • NoteModal - When adding a note, this modal appears so the user can write the title and content of the note.

Here's an overview of the ways Squid seamlessly handles the notes data in real time:

  1. In the handleSave function, Squid saves notes to the database:
app/components/NoteList.tsx
await collection.doc(id).update({
  title,
  content,
  timestamp,
});
  1. Squid also handles deleting notes:
app/components/NoteList.tsx
collection.doc(id).delete();
  1. In the Home function, Squid gets realtime updates from the database using this function:
app/layout.tsx
await squid
  .collection<Note>('notes')
  .query()
  .sortBy('timestamp', false)
  .dereference();

Run the notes application locally​

  1. Start the Squid backend locally using the following command in the terminal opened to your notes app backend:
squid start
  1. Start the Next.js frontend using the following command in the terminal opened to your notes app frontend:
netlify dev --live

Once the Netlify finishes setting up the local server, the terminal logs a link to the application in the format http://[RANDOM_ID].netlify.live. Click the link to open the notes app.

And that's it!​

Congratulations! You have successfully created a note-taking application that uses Next.js and Squid, and then you served it locally on Netlify. Together with Netlify, Squid makes it seamless to build and deploy applications that are powered by real-time data and can scale to millions of users.

Here are some things to try next:

Additional notes​

Notes app functionality​

Create some notes in the app and notice the following:

  1. When clicking Add Note in the modal, the new note shows up in the list of notes while the modal takes a fraction of a second to close. This is because the Squid Client SDK makes optimistic updates, meaning it updates the local state while also sending the mutation to the server. If the server update fails, the client will fallback to the previous data.

  2. Open a new tab and navigate to the same url. Notice that the notes you created show up right away. This is because the app uses the withServerQuery server component which will fetch the data on the server and send it pre-rendered to the client. This is a great way to improve the performance of your application.

  3. Interacting with the notes list on one tab will update the notes list on the other tab. This is because the Squid Client SDK will automatically subscribe to changes to the data and update the local state.

Squid Cloud environments​

  • Squid provides two different target environments: dev for development and prod for production. For this tutorial, we use the dev environment. To learn more, read about Squid's environments.
  • Your Squid developer ID is only used when running the project locally.
  • Since it's only for local development, the SQUID_DEVELOPER_ID in context.prod.environment is intentionally left blank because it is set in the .env.local file for development purposes only. Adding it to the netlify.toml file as blank will ensure that it is not included in the production build.

Squid Cloud functionality​

  • When using the Squid Cloud built-in database, your Squid backend is fully functional without additional customization. You can also add features to the Squid backend like Schedulers, Triggers in response to database events, native queries for executing raw SQL or database-specific queries, and more. See the Backend SDK docs to check out all the options.
  • Since the built-in database is document-based, the notes collection represents a collection of documents. When using a SQL database, the collection represents a table where documents are rows of the table.