Forem: Rodolphe Dupuis

Implementing Docker for a Next.js and Node.js App: A Step-by-Step Guide 🐳🚀

Rodolphe Dupuis — Mon, 02 Dec 2024 09:43:04 +0000

In today’s development landscape, containerization is revolutionizing how applications are built, shipped, and run. Tools like Docker simplify deployment, improve scalability, and ensure consistency across environments.

In this article, we’ll explore how to use Docker to containerize a Next.js frontend and a Node.js backend, highlighting the many benefits Docker brings to modern development workflows. 🐳

We will use one of the app I developed for one of my previous guide:

Securing Your Fullstack App: Authentication & Authorization with JWT in Next.js and Node 🔒 🚀

Rodolphe Dupuis ・ Nov 27

#nextjs #jwt #node #react

Here we go! 🚀

Why use Docker?

First of all, it's important to understand why we use this tool.

Docker provides several advantages for developers and businesses:

Environment Consistency: Ensures your app runs identically on development, staging, and production environments.
Simplified Deployment: Packaged containers make deployments repeatable and scalable.
Dependency Management: Bundles dependencies into containers, eliminating "it works on my machine" issues.
Scalability: Containers are lightweight and can be scaled horizontally with ease.
Isolation: Containers keep your application isolated from the host system, improving security and stability.

Setting Up Docker for a Next.js and Node.js Application

Prerequisites

Install Docker
Basic understanding of Docker concepts

project/
├── jwt-back/
│   ├── package.json
│   ├── server.js
│   └── Dockerfile
├── jwt-front/
│   ├── package.json
│   ├── next.config.js
│   └── Dockerfile
├── docker-compose.yml

Step 1: Containerize the Node.js Backend

We created this previous package.json in the backend app:

{
  "name": "jwt-back",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "Rodolphe Dupuis",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.20.3",
    "cookie-parser": "^1.4.7",
    "cors": "^2.8.5",
    "express": "^4.21.1",
    "jsonwebtoken": "^9.0.2"
  }
}

Let's add the Dockerfile:

# Use Node.js as the base image
FROM node:18

# Set the working directory
WORKDIR /app

# Copy the package.json file and install its dependencies
COPY package.json .
RUN npm install

# Copy the rest of the application code
COPY . .

# Expose the port the app will run on
EXPOSE 5001

# Start the server
CMD ["npm", "start"]

Now that we are all set with the backend Dockerfile, we can build and run it:

docker build -t backend-app ./backend
docker run -p 3001:3001 backend-app

So far everything looks good and the backend app is running smoothly.

Step 2: Containerize the Next.js Frontend

⚛️ We created this previous package.json in the frontend app when creating the Next.js app:

{
  "name": "jwt-front",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "axios": "^1.7.8",
    "next": "15.0.3",
    "react": "19.0.0-rc-66855b96-20241106",
    "react-dom": "19.0.0-rc-66855b96-20241106"
  },
  "devDependencies": {
    "eslint": "^8",
    "eslint-config-next": "15.0.3"
  }
}

Let's add the Dockerfile:

# Use Node.js as the base image
FROM node:18

# Set the working directory
WORKDIR /app

# Copy package.json and install dependencies
COPY package.json .
RUN npm install

# Copy the rest of the application code
COPY . .

# Build the app
RUN npm run build

# Expose the port for Next.js
EXPOSE 3001

# Start the app
CMD ["npm", "start"]

Now that we are all set with the frontend Dockerfile, we can build and run it:

docker build -t frontend-app ./frontend
docker run -p 3000:3000 frontend-app

At this step, your frontend app is running using Docker perfectly as well as your backend app

Step 3: Orchestrate with Docker Compose

Now, let's break into one of the most important and powerful part of Docker: orchestrating. Docker Compose simplifies the process of managing multi-container applications.

Let's add a docker-compose.yml file at the root of the project (check the project structure again if needed):

version: '3.8'
services:
  frontend:
    build: ./jwt-front
    ports:
      - "3000:3000"
    depends_on:
      - backend

  backend:
    build: ./jwt-back
    ports:
      - "5001:5001"

Now, you can run the application with Docker Compose using the following command:

docker-compose up --build

Now you can freely access your frontend app at http://localhost:3000 and interact with the server!

Benefits of Using Docker for This Setup

We are almost at the end of this guide and maybe you are wondering what is the purpose behind all that. After all, you are still accessing your frontend app the same way right?

Let's break down the benefits of Docker:

Simplified Development Environment
Docker ensures that both the frontend and backend run in isolated, consistent environments, eliminating setup hassles.
Portability
The entire application can be packaged and run on any machine with Docker, regardless of the host OS 📦
Scalability
Using tools like Kubernetes, these containers can be easily scaled to handle high traffic 🛠️
Efficient Resource Usage
Containers are lightweight and start quickly, improving performance compared to traditional virtual machines 🌐
Ease of Testing
Spin up identical containers for staging or testing without impacting the production environment 🚢
Seamless Collaboration
Teams can share Docker images or configurations, ensuring everyone is working on the same environment 🚀

Best Practices for Dockerizing Your App

You can use .dockerignore to exclude unnecessary files from your image (e.g., node_modules or .git directories).

Keep Docker images lightweight by using multistage builds. Multistage builds make use of one Dockerfile with multiple FROM instructions. Each of these FROM instructions is a new build stage that can COPY artifacts from the previous stages.

Regularly update your base images to include the latest security patches.

Use environment variables for sensitive data, avoiding hardcoding them into Dockerfiles.

Conclusion

Implementing Docker for your Next.js and Node.js app brings reliability, scalability, and simplicity to your development workflow. By containerizing both the frontend and backend, you streamline deployment, maintain environment consistency, and unlock the potential for rapid scaling.

Docker is a must-have tool for modern developers—start using it today and elevate your application development process! 🚀

Let me know if there is a concept or tech that you would like me to talk about!

Happy coding!

Securing Your Fullstack App: Authentication & Authorization with JWT in Next.js and Node 🔒 🚀

Rodolphe Dupuis — Wed, 27 Nov 2024 14:54:42 +0000

Securing your fullstack application is critical to protect user data and maintain trust. One of the most common ways to implement authentication and authorization in modern applications is through JSON Web Tokens (JWT).

In this guide, we’ll explore how to secure your Next.js app by setting up JWT-based authentication and implementing role-based authorization.

What Is JWT and Why Use It?

JWT is a compact, self-contained way to securely transmit information between parties as a JSON object. It is often used for:

Authentication: Verifying the identity of a user.
Authorization: Controlling access to resources based on user roles or permissions.

How JWT works

Login: The client sends login credentials (e.g., email and password) to the backend.
Token generation: If valid, the server generates a JWT containing user details and sends it back.
Storage: The client stores the JWT (e.g., in httpOnly cookies or local storage).
Subsequent Requests: The client includes the JWT in the request headers to access protected resources.
Verification: The server verifies the token's validity before granting access.

Step 1: Set Up Your Next.js and Node.js Environment

Before diving into the code, ensure you have the following:

Node.js installed.
A new Next.js project ready to run: run the command npx create-next-app@latest your-project-name to create a Next.js app.
The following dependencies installed on your backend folder: npm install jsonwebtoken bcryptjs express cors body-parser cookie-parser

Your Next.js environment is now ready to create some magic 🚀

Step 2: Build the Backend API

We’ll use Node.js with Express to handle authentication.

Create the Express server

const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const bodyParser = require('body-parser');
const cors = require('cors');
const cookieParser = require('cookie-parser');

const app = express();
const PORT = 5001;

// Middleware
app.use(cors({ origin: 'http://localhost:3000', credentials: true }));
app.use(bodyParser.json());
app.use(cookieParser());

// Secret key for JWT
const SECRET_KEY = 'your-secret-key';

// Mock user database
const users = [
  { id: 1, email: 'user@user.com', password: bcrypt.hashSync('aw3$0m3AndHaRdPwD!', 10), role: 'user' },
  { id: 2, email: 'admin@admin.com', password: bcrypt.hashSync('aw3$0m3AndHaRdPwDButAdm1n!', 10), role: 'admin' },
];

Create Login route

app.post('/api/login', (req, res) => {
  const { email, password } = req.body;
  const user = users.find(u => u.email === email);

  if (!user || !bcrypt.compareSync(password, user.password)) {
    return res.status(401).json({ message: 'Invalid email or password' });
  }

  // Generate JWT
  const token = jwt.sign({ id: user.id, role: user.role }, SECRET_KEY, { expiresIn: '1h' });

  // Set as httpOnly cookie
  res.cookie('token', token, { httpOnly: true }).json({ message: 'Logged in successfully' });
});

Create Protected route

app.get('/api/protected', (req, res) => {
  const token = req.cookies.token;

  if (!token) {
    return res.status(401).json({ message: 'Unauthorized' });
  }

  try {
    const decoded = jwt.verify(token, SECRET_KEY);
    res.json({ message: 'Welcome to the protected route!', user: decoded });
  } catch (err) {
    res.status(401).json({ message: 'Invalid token' });
  }
});

Create Logout route

app.post('/api/logout', (req, res) => {
  res.clearCookie('token').json({ message: 'Logged out successfully' });
});

Don't forget to add at the end of your file:

// Start the server
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

This is a very basic implementation of an Express app that will allow us to send HTTP request on the implemented routes 🎯

Start the server to test using the commande: node server.js where server.js is the name of your file.

Step 3: Implement the Next.js frontend

First of all, don't forget to add the axios dependency by using the command: npm install axios in your Next.js app

Login page

Create a new file pages/login.js:

import { useState } from 'react';
import axios from 'axios';

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

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('http://localhost:5000/api/login', { email, password }, { withCredentials: true });
      alert(response.data.message);
    } catch (err) {
      alert(err.response?.data?.message || 'Login failed');
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <input type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <button type="submit">Login</button>
    </form>
  );
}

This page renders a very simple login form where you can use the login information you added in the users array variable in your server implementation. This is obviously not a good thing to do and you should never do this, this is a simple implementation to demonstrate the power of JWT security 💪

Add a protected page

Create a new file pages/protected.js:

import axios from 'axios';
import { useEffect, useState } from 'react';

export default function Protected() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('http://localhost:5000/api/protected', { withCredentials: true });
        setData(response.data);
      } catch (err) {
        alert('Access denied');
      }
    };
    fetchData();
  }, []);

async function handleLogout() {
        try {
            await axios.post('http://localhost:5001/api/logout', {}, { withCredentials: true });
            router.push('/login');
        } catch (error) {
            alert('Could not logout');
        }
    }

  if (!data) return <p>Loading...</p>;

  return <div>
        {JSON.stringify(data)}
        <button onClick={handleLogout}>Logout</button>
    </div>;
}

This page renders the result of the server GET request on the route /api/protected ✅

If you try to access this route without being logged in, an error alert will be displayed on the page and you will not be able to access its content ❌

Step 4: Add Role-Based Authorization

Enhance your backend to enforce roles:

function authorizeRoles(allowedRoles) {
  return (req, res, next) => {
    const token = req.cookies.token;
    if (!token) return res.status(401).json({ message: 'Unauthorized' });

    try {
      const decoded = jwt.verify(token, SECRET_KEY);
      if (!allowedRoles.includes(decoded.role)) {
        return res.status(403).json({ message: 'Forbidden' });
      }
      req.user = decoded;
      next();
    } catch (err) {
      res.status(401).json({ message: 'Invalid token' });
    }
  };
}

// Example: Admin-only route
app.get('/api/admin', authorizeRoles(['admin']), (req, res) => {
  res.json({ message: 'Welcome Admin!' });
});

This route uses a validation middleware authorizeRoles that is the function we added right before. This function verifies there is a token and that the user trying to access the resource has the right authorization.

Conclusion

So here is how you can simply, and very fast (as always with my guides 🤩), secure your fullstack application with JWT technology in Next.js and Node.

This approach provides a reliable and scalable solution for managing user sessions while ensuring a seamless user experience.

Stay proactive about security by keeping dependencies updated, implementing HTTPS, and following best practices for managing tokens.

Happy coding!

Top 5 Common Mistakes in React Development and How to Avoid Them ⚛️

Rodolphe Dupuis — Tue, 26 Nov 2024 17:07:06 +0000

I’ve been developing React applications for a few years now and I’ve been through countless mistakes that slow down the development of your projects.

React is one of the most popular libraries for building dynamic user interfaces, but its flexibility can also lead to certain common mistakes for the new developers.

This guide covers the top mistakes developers can make in React and provides actionable tips to write better, more efficient code.

Let's dive in!

1. Mutating State

Before continuing, let's write our React component first that is supposed to display a list of items, as well as adding or removing one:

import { useState } from "react";

const Home = (props) => {
    const [items, setItems] = useState(['item1', 'item2']);
    const [itemToAdd, setItemToAdd] = useState('');

    function wrongHandleAddItem(item) {
        items.push(item);

        setItems(items);
    }

    function goodHandleAddItem(item) {
        if (item.length === 0)
            return;

        const newArray = [...items, item];

        setItems(newArray);
        setItemToAdd('');
    }

    function removeItem(item) {
        const itemIndex = items.indexOf(item);

        if (itemIndex !== -1) {
            const newArray = [...items];

            newArray.splice(itemIndex, 1);
            setItems(newArray);
        }
    }

    return (
        <div style={{ padding: '3rem', maxWidth: '12rem' }}>
            <div>
                {items.map((item, key) => (
                    <div key={key} style={{ marginTop: '0.5rem', display: 'flex', justifyContent: 'space-between' }}>
                        {item}
                        <button onClick={() => removeItem(item)}>-</button>
                    </div>
                ))}
            </div>
            <div style={{ marginTop: '1rem' }}>
                <input value={itemToAdd} onChange={event => setItemToAdd(event.target.value)} />
                <button onClick={() => wrongHandleAddItem(itemToAdd)} style={{ marginLeft: '1rem' }}>+</button>
            </div>
        </div>
    )
}

export default Home;

Here, I wrote two different methods to add an item in the items state array. Let's break it down together:

function wrongHandleAddItem(item) {
    items.push(item);

    setItems(items);
}

The first thing this method does is calling the push array function aiming to add an elemen to an array.
The second thing is calling setItems to apply the changes to the state variable.

However, if you try running this code, it won't work ❌

This code is violating a very important React rule: mutating the state.

React relies on an state variable's identity to tell when the state has changed. When we push an item into an array, we aren't changing that array's identity, and so React can't tell that the value has changed and re-render the array.

Here is how to fix it ✅ :

function goodHandleAddItem(item) {
    if (item.length === 0)
        return;

    const newArray = [...items, item];

    setItems(newArray);
    setItemToAdd('');
}

In this method, I created a new array using the spread operator ... allowing to instantiate the new array with the content of items. The second parameter is used to add the new content (here item).

The last step is to call the setItems method to validate the new state of the variable items ✅

2. Not generating `key` in Lists

Every React developer has probably seen this error at least once during their development journey.

The most common way for this to happen is when mapping over data. Here's an example of this violation:

items.map((item) => (
    <div>
        {item}
        <button onClick={() => removeItem(item)}>-</button>
    </div>
))}

When we want to render an array of elements, we need to give React a bit more context to allow it to identify each item. In the best possible world, it has to be a uniquer identifier.

Here is a quick way to fix this, but that is not optimal:

items.map((item, index) => (
    <div key={index} >
        {item}
        <button onClick={() => removeItem(item)}>-</button>
    </div>
))}

As you'll gain experience in React and understand how it works better, you'll be able to tell whether it's fine or not based on your case.

To make it perfect, you can use a uuid generator such as crypto.randomUUID() and store it into your items list as object as follows:

const newItemToAdd = {
    id: crypto.randomUUID(),
    value: item
};
const newArray = [...items, newItemToAdd];
  setItems(newItems);

and use it as follows during the render:

items.map((item, index) => (
    <div key={item.id} >
        {item.value}
        <button onClick={() => removeItem(item)}>-</button>
    </div>
))}

Now things are perfect ✅

3. Using `async` in `useEffect`

Let's suppose we have a function which needs to fetch some data from an API on mount. We'll use the useEffect hook, and we want to use the await keyword.

Let's check the first try:

As you may know, the await keyword needs to be in a function marked with the async keyword:

useEffect(async () => {
    const url = "/api/to/fetch";
    const res = await fetch(url);
    const json = res.json();

    return(json);
}, []);

Unfortunately, this doesn't work and we get this error message:

destroy is not a function

Here is the fix: create a separate async function within the useEffect hook ✅

useEffect(() => {
    async function fetchData() {
        const url = "/api/to/fetch";
        const res = await fetch(url);
        const json = res.json();

        return json;
    }

    fetchData();
}, []);

It's important to understand what the async keyword implies:
It doesn't return the object json, it returns a Promise that resolves the object json.

This is actually a problem, as useEffect isn't supposed to return a Promise. It expects us to return either nothing (like we are above), or a cleanup function. Cleanup functions are important, out of the scope of this guide, but here is out to use it:

useEffect(() => {
    async function fetchData() {
        const url = "/api/to/fetch";
        const res = await fetch(url);
        const json = res.json();

        return json;
    }

    fetchData();

    return () => {
        // Cleanup logic here
    }
}, []);

4. Accessing state before re-render

Let's go back to state management for one more interesting mistake new developers make very often. This will help us understanding React state even better.

Let's take our goodHandleAddItem method to illustrate this:

function goodHandleAddItem(item) {
    if (item.length === 0)
        return;

    const newArray = [...items, item];

    setItems(newArray);

    console.log(items);
}

When running this code, we can see that the console does not log the result we expect.

Here is the problem: the setter function of a state variable is asynchronous.

When we call the setItems method, we are actually scheduling an update, and not assigning a variable.

Here is the fix: we already know what the content of the variable should be with the newArray variable. Which means that to use the data we want supposedly to be the content of the items variable, we need to use the variable newArray instead even after the setItems ✅

5. Using stale State data

The last one will also be about React state management, you'll become a pro after this guide! 🚀

A common pitfall when using React Hooks is the misuse of stale state data. This can occur when we directly reference the state variable in consecutive state updates. As we saw in the previous error, state updates may be asynchronous, it means that the state variable might not reflect the latest value when it’s referenced in successive calls.

Let's use a brand new example to make things clearer, the well-known counter:

const [count, setCount] = useState(0);

setCount(count + 1);
setCount(count + 1);

The usage above is incorrect. In fact, count is referenced directly within the setCount call. In event handlers and lifecycle methods, state updates can be batched and will both use the same initial value as count, which will lead to an incorrect final state.

There is another form of setCount that we can use to make things work: the updater function. The updater function takes the previous state as an argument and returns the new state, so each consecutive update will have the correct value, preventing unwanted behaviors.

Here is how to use it:

setCount((previousValue) => previousValue + 1);
setCount((previousValue) => previousValue + 1);

Logging the content of count now indicates the correct value ✅

Conclusion

Avoiding these common mistakes will make you develop more performant React applications and master the state management!

I hope this guide helped you and wish you a happy coding time!

Leave a like if you enjoyed this guide, as a new or confirmed React developer 🚀

See you soon!

Implementing Server-Side Rendering (SSR) with Next.js and Firebase for SEO-Friendly React Apps 🚀

Rodolphe Dupuis — Tue, 26 Nov 2024 11:14:42 +0000

In the modern tech world, Search Engine Optimization (SEO) constitues a very important aspect in achieving online success. With so much competition, SEO ensures your website or product to reach the right audience.

In this guide, we'll build a simple Next.js app with Firebase for backend services. We'll implement SSR to fetch data from Firebase on the server side and serve it as static HTML to the client.

Why Server-Side Rendering (SSR)

React apps are often client-rendered by default, meaning the HTML is generated in the browser, which can be slow and less SEO-friendly. Server-Side Rendering (SSR) addresses these issues by rendering the HTML on the server and sending it to the client. This approach provides better SEO and faster initial loading times.

Why Server-Side Rendering (SSR) is SEO-Friendly

Traditional client-rendered React applications can have challenges with SEO because:

JavaScript Rendering: Many search engines are still limited in how they render JavaScript. Since client-side React apps generate HTML in the browser, bots may struggle to index or even see the content effectively.
Poor Initial Loading Performance: With client-side rendering, users have to wait for the JavaScript to load and render on their devices before they see meaningful content. This delay can lead to poor user experience and, consequently, lower rankings in search engines, as they tend to prioritize pages with faster load times.

By using Server-Side Rendering (SSR) with Next.js, you’re generating the HTML content on the server before sending it to the user’s browser. This has the following key SEO benefits:

Immediate Content Availability: With SSR, search engine bots and users get pre-rendered HTML right from the start. The entire content is loaded and ready on page load, making it immediately accessible for both search engines and users.
Faster Page Load Times: Server-rendered pages are faster since the HTML is already prepared on the server. Google’s ranking algorithms consider loading speed a significant factor, and faster pages generally get higher rankings.
Better Crawling and Indexing: Search engine bots prefer pages where content is easily accessible in the HTML. SSR with Next.js provides bots with fully rendered HTML, reducing the chance that important content is missed.
Improved Social Sharing: When you share a URL on social media, the sharing platform reads metadata from the page (like title, description, and preview images). With SSR, you can dynamically generate these tags for each page, allowing for richer, accurate previews when shared on platforms like Facebook, Twitter, and LinkedIn.

Step 1: Setting up the Next.js project

Open a terminal and write the command below:

npx create-next-app task-manager
cd task-manager

This creates a Next.js application inside the folder task-manager.

Install Firebase SDK

Install the necessary Firebase packages using the command below:

npm install firebase firebase-admin

Step 2: Implement Firebase and Firebase-admin

Create your Firebase Project

First of all, you have to create your project in the Firebase console.

Create a file called firebase.js inside the src/ folder or wherever you prefer.

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import 'firebase/auth';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
};

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);
const auth = getAuth(app);

export { db, auth };

Replace the placeholders with your Firebase configuration copied in the previous step.

Configure Firebase-admin SDK

First we need to get our private key from firebase.
In order to access to firebase from the server and use the Admin SDK we need to generate a private key:

Go to Project Overview then Project settings.
Go to Service accounts - Firebase Admin SDK then Generate new private key.
Firebase generated a .json file with your credentials.

Finally, create the file firebaseAdmin.js and add:

import admin from 'firebase-admin';
import serviceAccount from '../serviceAccountKey.json';

if (!admin.apps.length) {
  admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),
  });
}

export const firestoreAdmin = admin.firestore();

serviceAccountKey.json is the .json file generated before.

Add a collection in your Firestore

Before going any further, we need to add a collection to our Firestore. To do so:

Go to the Firestore Database and click + Start collection
Add the collection ID tasks
Add an auto-id.
Add a field named title of type string and type the title you want.
Add a field named content of type string and type the content you want.

We are now ready for the next steps.

Step 3: Building the page with SSR

In Next.js, pages inside the pages folder are treated as routes. Let’s create an example page that will fetch data from Firestore using SSR.

Creating a Firestore collection

In Firestore, create a collection called posts and add a few documents. Each document can have fields like title and content to serve as our sample data.

Creating the `index.js` Page with SSR

Create an index.js file in the pages folder:

import React from 'react';
import { firestoreAdmin } from '../firebaseAdmin';

const Home = ({ tasks }) => {
  return (
    <div>
      <h1>Blog tasks</h1>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            <h2>{task.title}</h2>
            <p>{task.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export async function getServerSideProps() {
  const tasksSnapshot = await firestoreAdmin.collection('tasks').get();
  const tasks = tasksSnapshot.docs.map((doc) => ({
    id: doc.id,
    ...doc.data(),
  }));

  return {
    props: { tasks }, // will be passed to the page component as props
  };
}

export default Home;

In this file:

getServerSideProps is an async function specific to Next.js running on the server side. It is allowing us to fetch data directly from Firestore before rendering the page.
The data is returned as props to the Home component, rendering the list of posts.

Step 4: Run the app

Start your Next.js app by running the command:

npm run dev

and visit http://localhost:3000/home

The page should display the list of tasks inside your collection with their titles and content.

Step 5: Deploying the app using Vercel

To deploy the app, you can use Vercel, which is built specifically for Next.js. Here’s how to deploy:

Push your code to a GitHub repository.
Go to Vercel, sign in with your GitHub account, and import the repository.
Vercel automatically detects that it’s a Next.js project and handles the build and deployment process.

Conclusion

We've now built a way to optimize SEO in your Next.js app by implementing Server-Side Rendering (SSR). With Server-Side Rendering in Next.js, paired with Firebase as a backend, you can create SEO-friendly, high-performance applications. SSR enables better SEO by delivering pre-rendered HTML, which search engines can easily index, while Firebase provides a scalable, flexible backend. This setup is excellent for projects that need fast initial load times and are aiming to improve search visibility.

Building a Full-Stack App with Next.js, and Firebase: A Step-by-Step Guide

Rodolphe Dupuis — Wed, 20 Nov 2024 14:10:26 +0000

In today’s fast-paced tech world, choosing the right stack is essential for entrepreneurs and startups eager to bring their ideas to life quickly.
The combination of Next.js, and Firebase provides a powerful way to rapidly prototype and build apps, making it the ideal environment to test out your new ideas at a very important pace.
With Next.js’s flexible, component-based front end, and Firebase’s all-in-one cloud services like authentication, database, and hosting, this stack makes it easy to develop proof-of-concept (PoC) projects and iterate on ideas fast—without complex infrastructure setup.

In this guide, we’ll build a simple to-do app to show how quickly you can go from concept to working application.

What You’ll Build in This Guide

We’ll build a simple task management application where users can:

Sign up and sign in using Firebase Authentication.
Create and manage tasks (CRUD operations) stored in Firebase Firestore.
The app will be deployed on Vercel, making it production-ready.

Prerequisites

Here is a quick list about the things to have before going any further:

A Firebase account.
Basic knowledge of React and Next.js.
Node.js installed on your machine.

Step 1: Setting up the Next.js project

Open a terminal and write the command below:

npx create-next-app task-manager
cd task-manager

This creates a Next.js application inside the folder task-manager.

Install Firebase SDK

Install the necessary Firebase packages using the command below:

npm install firebase

The Firebase SDK will allow us to interact with the services included like Firestore and Authentication from within the Next.js app.

Step 2: Firebase Setup

Create a Firebase project

Go to the Firebase console and create a new Firebase project.
Enable Firebase Authentication and Firestore Database.

Configure Firebase Authentication

In the Authentication section, add a new sign-in method using the native email/password provider.
In the Firestore Database section, create a new database and start in test mode for development purposes.

Download Firebase Config

To connect your app to Firebase, you'll need to configure Firebase in your Next.js app.

Go to Project Settings in Firebase Console, then under Your Apps, select Web App to get the Firebase configuration.

Copy this configuration as you'll use it to initialize Firebase in your app.

Step 3: Initialize Firebase in the Next.js app

Create Firebase Configuration file

Create a file called firebase.js inside the src/ folder or wherever you prefer.

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import 'firebase/auth';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
};

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);
const auth = getAuth(app);

export { db, auth };

Replace the placeholders with your Firebase configuration copied in the previous step.

Step 4: Build the Authentication using Firebase

In this step, we will build the authentication part where users can sign up, sign in, and sign out.

Sign-up and Sign-in pages

Create the pages/signUp.js for the signing page:

import { useState } from 'react';
import { auth } from '../firebase';
import { useRouter } from 'next/router';
import { createUserWithEmailAndPassword } from 'firebase/auth';

const Signup = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState(null);
  const router = useRouter();

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
        await createUserWithEmailAndPassword(auth, email, password);
        router.push('/tasks'); // Redirect to tasks page after signup
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <div>
      <h2>Sign Up</h2>
      <form onSubmit={handleSubmit}>
        <input 
          type="email" 
          placeholder="Email" 
          value={email} 
          onChange={(e) => setEmail(e.target.value)} 
        />
        <input 
          type="password" 
          placeholder="Password" 
          value={password} 
          onChange={(e) => setPassword(e.target.value)} 
        />
        <button type="submit">Sign Up</button>
      </form>
      {error && <p>{error}</p>}
    </div>
  );
};

export default Signup;

Create the pages/signIn.js for the signing page:

import { useState } from 'react';
import { auth } from '../firebase';
import { useRouter } from 'next/router';
import { signInWithEmailAndPassword } from 'firebase/auth';

const Signin = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState(null);
  const router = useRouter();

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
        await signInWithEmailAndPassword(auth, email, password);
        router.push('/tasks'); // Redirect to tasks page after login
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <div>
      <h2>Sign In</h2>
      <form onSubmit={handleSubmit}>
        <input 
          type="email" 
          placeholder="Email" 
          value={email} 
          onChange={(e) => setEmail(e.target.value)} 
        />
        <input 
          type="password" 
          placeholder="Password" 
          value={password} 
          onChange={(e) => setPassword(e.target.value)} 
        />
        <button type="submit">Sign In</button>
      </form>
      {error && <p>{error}</p>}
    </div>
  );
};

export default Signin;

Step5: Task management and CRUD operations with Firestore

This step is focusing on implementing the core of the application: the task management system.

Tasks Page with CRUD Operations

Create pages/tasks.js where users can add, view, and delete tasks:

import { useState, useEffect } from 'react';
import { db, auth } from '../firebase';
import { useRouter } from 'next/router';
import { collection, query, where, onSnapshot, addDoc, deleteDoc, doc } from 'firebase/firestore';

const Tasks = () => {
  const [tasks, setTasks] = useState([]);
  const [task, setTask] = useState('');
  const [error, setError] = useState(null);
  const router = useRouter();

  useEffect(() => {
    if (!auth.currentUser) {
      router.push('/signin');
      return;
    }

    const q = query(
      collection(db, 'tasks'),
      where('userId', '==', auth.currentUser.uid)
    );

    const unsubscribe = onSnapshot(q, (snapshot) => {
      const newTasks = snapshot.docs.map((doc) => {
        return { id: doc.id, ...doc.data() };
      });
      setTasks(newTasks);
    });

    return () => unsubscribe();
  }, []);

  const handleAddTask = async (e) => {
    e.preventDefault();
    if (task.trim()) {
      try {
        await addDoc(collection(db, 'tasks'), {
          userId: auth.currentUser.uid,
          task,
          completed: false,
        });
        setTask('');
      } catch (err) {
        setError(err.message);
      }
    }
  };

  const handleDeleteTask = async (id) => {
    try {
      await deleteDoc(doc(db, 'tasks', id));
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <div>
      <h2>Your Tasks</h2>
      <form onSubmit={handleAddTask}>
        <input
          type="text"
          value={task}
          onChange={(e) => setTask(e.target.value)}
          placeholder="Add a new task"
        />
        <button type="submit">Add Task</button>
      </form>
      {error && <p>{error}</p>}
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            {task.task}
            <button onClick={() => handleDeleteTask(task.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Tasks;

This page allows users to:

Add tasks to Firebase Firestore.
View tasks associated with their user.
Delete tasks from Firestore.

Step 6: Deploying the app using Vercel

To deploy the app, you can use Vercel, which is built specifically for Next.js. Here’s how to deploy:

Push your code to a GitHub repository.
Go to Vercel, sign in with your **GitHub **account, and import the repository.
Vercel **automatically detects that it’s a **Next.js project and handles the build and deployment process.

Conclusion

You’ve now built a full-stack application using Next.js and Firebase, covering essential features like authentication and CRUD operations with Firestore. This stack offers a powerful way to build scalable, serverless applications quickly, making it perfect for MVPs and production apps alike.

Please let me know if you have any problem going through this guide or if you see any possible improvement :)

Happy coding!

Forem: Rodolphe Dupuis

Implementing Docker for a Next.js and Node.js App: A Step-by-Step Guide 🐳🚀

Securing Your Fullstack App: Authentication & Authorization with JWT in Next.js and Node 🔒 🚀

Rodolphe Dupuis ・ Nov 27

Why use Docker?

Setting Up Docker for a Next.js and Node.js Application

Prerequisites

Step 1: Containerize the Node.js Backend

Step 2: Containerize the Next.js Frontend

Step 3: Orchestrate with Docker Compose

Benefits of Using Docker for This Setup

Best Practices for Dockerizing Your App

Conclusion

Securing Your Fullstack App: Authentication & Authorization with JWT in Next.js and Node 🔒 🚀

What Is JWT and Why Use It?

How JWT works

Step 1: Set Up Your Next.js and Node.js Environment

Step 2: Build the Backend API

Create the Express server

Create Login route

Create Protected route

Create Logout route

Step 3: Implement the Next.js frontend

Login page

Add a protected page

Step 4: Add Role-Based Authorization

Conclusion

Top 5 Common Mistakes in React Development and How to Avoid Them ⚛️

1. Mutating State

2. Not generating key in Lists

3. Using async in useEffect

4. Accessing state before re-render

5. Using stale State data

Conclusion

Implementing Server-Side Rendering (SSR) with Next.js and Firebase for SEO-Friendly React Apps 🚀

Why Server-Side Rendering (SSR)

Why Server-Side Rendering (SSR) is SEO-Friendly

Step 1: Setting up the Next.js project

Install Firebase SDK

Step 2: Implement Firebase and Firebase-admin

Create your Firebase Project

Configure Firebase-admin SDK

Add a collection in your Firestore

Step 3: Building the page with SSR

Creating a Firestore collection

Creating the index.js Page with SSR

Step 4: Run the app

Step 5: Deploying the app using Vercel

Conclusion

Building a Full-Stack App with Next.js, and Firebase: A Step-by-Step Guide

What You’ll Build in This Guide

Prerequisites

Step 1: Setting up the Next.js project

Install Firebase SDK

Step 2: Firebase Setup

Create a Firebase project

Configure Firebase Authentication

Download Firebase Config

Step 3: Initialize Firebase in the Next.js app

Create Firebase Configuration file

Step 4: Build the Authentication using Firebase

Sign-up and Sign-in pages

Step5: Task management and CRUD operations with Firestore

Tasks Page with CRUD Operations

Step 6: Deploying the app using Vercel

Conclusion

2. Not generating `key` in Lists

3. Using `async` in `useEffect`

Creating the `index.js` Page with SSR