Forem: Vitor Alecrim

Building Your Own Blog with Next.js and Node.js

Vitor Alecrim — Fri, 06 Dec 2024 17:14:32 +0000

Introduction

Hello, how are you? It's Vítor here, back with a new project to help you improve your programming skills. It's been a while since I published a tutorial. Over the past few months, I took some time to rest and focus on other activities. During this period, I developed a small web project: A BLOG

Sounds good?

I know it might not seem like a big deal, but trust me, it's an amazing way to test your skills.

In this project, you'll work on both the frontend and backend.

We'll cover topics like user authentication with Jsonwebtoken, writing HTTP routes, crafting SQL queries, navigating private routes, connecting a Node.js server to a MySQL database, and much more.

Have fun o/

Blog Server with JWT Authentication - Powered by Node.js & MySQL

Vitor Alecrim — Fri, 06 Dec 2024 17:02:10 +0000

Introduction

Hello, how are you? I’m Vitor, and I’m back with a new project. It’s been some time since my last tutorial, as I’ve been busy with other activities over the past few months. However, it’s time to return to the fascinating world of code.

Today, we’ll build a Node.js server for a blog platform. Our server will have the ability to register users and authenticate them using JWT. Additionally, we’ll cover topics such as registering, querying, editing, and deleting data like text and images in a MySQL database.

Once your API is ready, you’ll be able to power your frontend application. If you don’t have a site yet, check out the frontend tutorial*.

Throughout this tutorial, I’ll strive to be as concise and clear as possible.

You can access the source code here:

Gondrak08 / blog-nodejs-server

A blog server made with Node.js and Mysql. This is part of a tutorial project.

Servidor para Blog - Node.js & Mysql.

Tutorial em texto;

Ingredientes

bcryptjs - uma biblioteca de criptografia para senhas.
cors - uma middleware que nos permite lidar com Cross-Origin Resource Sharing (CORS).
dotenv - um módulo que nos possibilita acessar variáveis em arquivos '.env'.
express - uma biblioteca que nos permite criar APIs RESTful.
jsonwebtoken - uma biblioteca para a criação dos nossos tokens de autenticação.
multer - o Multer é uma biblioteca que nos permitirá salvar imagens em nosso servidor.
mysql - uma biblioteca de conexão com o banco de dados MySQL.

Como usar

Instalando aplicação.

npm i

Conectando ao Banco de dados

Lembre-se de configurar a sua conexão ao banco de dados Mysql. Em connection.js

const mysql = require("mysql");
const dbConfig = {
  host: "localhost",
  user: "your db user",
  password: "your db password",
  database: "your

…

View on GitHub

I hope you enjoy it.

Happy coding!

Libraries

Here are the libraries we’ll use in our application:

bcryptjs - a library for password encryption.
cors - middleware that allows us to handle Cross-Origin Resource Sharing (CORS).
dotenv - a module that lets us access variables in .env files.
express - a library that allows us to create RESTful APIs.
jsonwebtoken - a library for creating authentication tokens.
multer - Multer is a library that allows us to save images to our server.
mysql - a library for connecting to a MySQL database.

Architecture

The folder and file structure of our application:

server
  |
  |- middleware/
  |      |- auth.js
  |      |- upload.js
  |
  |- routes/
  |      |- user.js
  |      |- article.js
  |
  |- uploads/
  |- utils/
  |      |- trucantText.js
  |
  |- connection.js
  |- server.js
  |- tables.sql

Database

Before proceeding with our application, it is necessary to create the database. We will use the MySQL database to develop our project. You can choose the database management platform you are most familiar with, such as DBeaver, among others.

In my case, I will use the terminal:

Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 14
Server version: 8.0.35-0ubuntu0.22.04.1 (Ubuntu)

Copyright (c) 2000, 2023, Oracle and/or its affiliates.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

Once inside your application, create the database:

mysql> create database blog_db;

Table Declaration

Next, we will write the tables that will be used in our database.

If you are using the terminal, access your database:

mysql> use blog_db;

Once inside your database, copy each table below and paste it into your terminal.

1 User

create table user(
    id int primary key AUTO_INCREMENT,
    name varchar(250),
    password varchar(250),
    email varchar(50),
    role varchar(50),
    UNIQUE(email)
);

2 Articles

create table articles(
    id int NOT NULL AUTO_INCREMENT,
    userId int NOT NULL,
    title varchar(250) NOT NULL,
    image varchar(250) DEFAULT NULL,
    content varchar(250) NOT NULL,
    primary key(id)
);

3 RefreshToken

create table refreshToken(
    id int primary key AUTO_INCREMENT,
    expiresIn int,
    userName varchar(250),
    userId int NOT NULL
);

The final result of our tables will be:

mysql> show tables;
+-------------------------+
| Tables_in_blog_db |
+-------------------------+
| articles                |
| refreshToken            |
| user                    |
+-------------------------+
3 rows in set (0.00 sec)

Finally, let's create a test user with the following command inside the database:

 mysql> insert into user(name, password, email, role) values ('admin','admin','admin@admin.com','admin');

First Steps

Starting the Application

Let's start by creating the package.json. In your terminal, run the following command:

npm init

Configure your npm init as you see fit.

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (test) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC)

Installing dependencies

Next, let's install the libraries.

npm i express multer mysql bcryptjs cors dotenv jsonwebtoken

Creating the server

Inside the root of the project, create the server.js file and add the following code:

const express = require("express");
const cors = require("cors");
// connection to the server
const dbConnection = require("./connection");
const router = require("./routes/user");
// import routs
const user = require("./routes/user");
const article = require("./routes/article");

const app = express();

// middleware
app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.use("/uploads", express.static("uploads"));
app.use(express.json());
const upload = require("./middleware/upload");
// declare routs
app.use("/user", user);
app.use("/articles", article);

// calling server
const PORT = 8080;
app.listen(PORT, () => {
  {
    console.log(`server is running at port ${PORT} `);
  }
});

It is possible that some of the files have not been written yet at this point, but don't worry. We will create them later.

Once all the necessary modules are installed and the connection to the database is correctly configured, before starting the server:

If you want to do a test, comment out all the routes and database connection code, leaving only the app.listen.

You can write the following in the terminal:

$ node server.js

And our server will run on port 8080.

Connection to the Data Base

Using the mysql library, let's write the code that will connect our server to the database.
Remember to replace the values with your exact details to connect to the database. You can store them in your .env file for better protection.

Create a file named connection.js with the following content:

const mysql = require("mysql");
const dbConfig = {
  host: "localhost",
  user: "your db user",
  password: "your db password",
  database: "your db",
};
const dbConnection = mysql.createConnection(dbConfig);
module.exports = dbConnection;

Middleware

Inside the middleware folder, we will write two files.

Authentication

Inside the middleware/auth.js file, we will write the system responsible for validating our authentication key. This function will be used to protect the private routes of our application, preventing unauthorized users from accessing our database data.

First, in our root folder, let's declare a .env file. Then, within this file, we will save our authentication key.

TOKEN_KEY = "ColoqueAquiOSeuToken"
TOKEN_REFRESH = "InsiraAquiSeuTokenDeVaLiDaçÃo"
TOKEN_LIFE="300" // tempo de vida do token
TOKEN_LIFE_REFRESH="400" // tempo de vida do token refresh

You can use the terminal itself to generate your token. First, enter node.

$ node

Next, using the crypto library:

> require("crypto").randomBytes(64).toString('hex')

The result will be a line composed of numbers and letters.

If you want to learn more about jwt, check out its documentation.

Now, let's write our verifyToken function inside the auth.js file:

const jwt = require("jsonwebtoken");
const config = process.env;

const verifyToken = (req, res, next) => {
  const token =
    req.body.token || req.query.token || req.headers["x-access-token"];
  if (!token)
    return res.status(403).send("a token is required for authentication");
  try {
    const decoded = jwt.verify(token, config.TOKEN_KEY);
    req.user = decoded;
  } catch (err) {
    return res.status(401).send({ message: "ivalid token" });
  }
  return next();
};

module.exports = verifyToken;

File Upload

Our blog will make use of images when posting articles. For this, we will create a middleware capable of handling the path of the images and redirecting them to a specific folder in our application: uploads/.

We will use the multer library. To learn more, check its documentation.

Create a file called uploads.js inside the middleware folder:

const multer = require("multer");
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "./uploads/");
  },
  filename: function (req, file, cb) {
    cb(null, new Date().toISOString() + file.originalname);
  },
});

const upload = multer({
  storage: storage,
  limits: {
    fileSize: 1024 * 1024 * 10,
  },
});

module.exports = upload;

Utilities

Inside the utils/ folder, we will write the truncanteText function. Its use is simple. The function takes a text and returns a small part of it. It will be used to send a small summary of the article content as a query from our API.

Create a file called truncanteText.js inside the utils folder with the following content:

const trucanteText = (content, limit) => {
  const filteredContent = content.replace(/#{1,3}\s|```
{% endraw %}
/g, "");
  const words = filteredContent.split(" ");
  if (words.length > limit) {
    return words.slice(0, limit).join(" ") + "...";
  }
  return content;
};

module.exports = trucanteText;
{% raw %}

Routes

User

To write our user routes, we will use the following libraries:

express - to create our routes.
jsonwebtoken - to create our authentication and signing key.
connection.js - our connection module to perform queries to the database.

In routes/user.js:


js
require("dotenv").config();
const express = require("express");
const dbConnection = require("../connection");
const jwt = require("jsonwebtoken");

const router = express.Router();

Next, we will write three user routes:

1 - /Signup - Route for the method of registering new users in our database.

Define a POST HTTP route for /signup.


javascript
router.post("/signup", (req, res) => {
...
}

We obtain the new user's data, "name", "email", and "password", through their request.


javascript  
const user = req.body

Writing our sql query,



const query = "select email, name, password from user where email=?";

Database query, final result of the code:


javascript
router.post("/signup", (req, res) => {
  const user = req.body;
  const query = "select email, name, password from user where email=?";
  dbConnection.query(query, [user.email], (err, result) => {
    if (!err) {
      if (result.length <= 0) {
        const query = "insert into user (name,email,password) values(?,?,?)";
        dbConnection.query(
          query,
          [user.name, user.email, user.password],
          (err, results) => {
            if (!err) {
              return res
                .status(200)
                .json({ message: "You are Successfully Registrated" });
            } else {
              return res.status(500).json(err);
            }
          },
        );
      } else {
        return res.status(400).json({ message: "Email already registrated!" });
      }
    }
    return res.status(500).json(err);
  });
});

2. /Login - let's declare the route for user authentication in our application.

Define an HTTP POST route for /Login.


javascript
router.post("/login", (req, res) => {
...
}

We obtain the user's data, "email" and "password", through their request.


javascript  
const user = req.body

Writing our sql query,


javascript
const query = "select id, name, email, password from user where email=?";

Querying the database, handling the query result, and generating the token:


javascript
router.post("/login", (req, res) => {
  const user = req.body;
  const query = "select id, name, email, password from user where email=?";
  dbConnection.query(query, [user.email], (err, result) => {
    if (!err) {
      if (result.length <= 0 || result[0].password != user.password) {
        return res
          .status(401)
          .json({ message: "wrong password, try it again" });
      } else if (result[0].password === user.password) {
        const response = {
          userId: result[0].id,
          name: result[0].name,
          email: result[0].email,
        };
        const accessToken = jwt.sign(response, process.env.TOKEN_KEY, {
          expiresIn: process.env.TOKEN_LIFE,
        });
        const refreshToken = jwt.sign(response, process.env.TOKEN_REFRESH, {
          expiresIn: process.env.TOKEN_LIFE_REFRESH,
        });

        res.status(200).json({
          token: accessToken,
          expiresIn: process.env.TOKEN_LIFE,
          tokenRefresh: refreshToken,
          name: result[0].name,
          email: result[0].email,
          id: result[0].id,
        });
      }
    } else {
      return res.status(500).json({ message: "something went wrong", err });
    }
  });
});

If the credentials are correct, two JWT tokens are generated: one for regular access (accessToken) and another for refresh (refreshToken). The tokens contain information about the user, such as id, name, and email. The tokens are signed using secret keys defined in the environment variables.

3. /Refresh-Token - Route for re-authentication of our user in the application.

Define an HTTP POST route for "/refresh-token".


javascript
router.post("/refresh-token",  (req, res) => {...}

We obtain the user's previous refresh token through the request:


javascript
  const refreshToken = req.body.refreshToken;

We verify our refresh token:


javascript
if (!refreshToken)
  return res.status(401).json({ message: "Refresh token missing" });

We renew the access tokens:


javascript
const token = jwt.sign(response, process.env.TOKEN_KEY, {
  expiresIn: process.env.TOKEN_LIFE,
});

 const refreshToken = jwt.sign(response, process.env.TOKEN_REFRESH, {
    expiresIn: process.env.TOKEN_LIFE_REFRESH,
  });

Here is the final result:


javascript
router.post("/refresh-token", (req, res) => {
  const refreshToken = req.body.refreshToken;
  if (!refreshToken)
    return res.status(401).json({ message: "Refresh token missing" });

  jwt.verify(refreshToken, process.env.TOKEN_REFRESH, (err, decoded) => {
    if (!err) {
      const response = {
        userId: decoded.id,
        name: decoded.name,
        email: decoded.email,
      };
      const token = jwt.sign(response, process.env.TOKEN_KEY, {
        expiresIn: process.env.TOKEN_LIFE,
      });
      const refreshToken = jwt.sign(response, process.env.TOKEN_REFRESH, {
        expiresIn: process.env.TOKEN_LIFE_REFRESH,
      });

      res.status(200).json({
        id: decoded.id,
        name: decoded.name,
        email: decoded.email,
        token: token,
        expiresIn: process.env.TOKEN_LIFE,
        tokenRefresh: refreshToken,
      });
    } else {
      res.status(500).json(err);
    }
  });
})

Articles

In routes/article.js, we will start by calling the following libraries:

express - to create our routes.
jsonwebtoken - to create our authentication and its signing key.
connection.js - our connection module to perform the database queries.
authentication.js - our authentication middleware to protect private routes.
upload.js - our middleware for handling image uploads.


javascript
const express = require("express");
const dbConnection = require("../connection");
const fs = require("fs");
const path = require("path");
//middleware
const upload = require("../middleware/upload");
const authentication = require("../middleware/auth");
// utils
const trucanteText = require("../utils/trucanteText");

const router = express.Router();
//routes...
module.exports = router;

Then we will write the routes:

1. `/add` - Route to add a new article.

We define a POST HTTP route for "/add", passing the authentication middleware and upload.single("thumb") for uploading a single image:


javascript
router.post("/add", upload.single("thumb"), authentication, (req, res, next) => {
...
}

We collect the request body data (req.body) related to the new article, such as userId, title, and content. Additionally, we obtain the path of the uploaded image using the multer middleware and the name of the specified field ("thumb").



...
const { userId, title, content } = req.body;
const image = req.file.path;

Write the SQL query to insert the new article data into the articles table in the database. The values to be inserted are obtained from the variables userId, title, image, and content.


javascript
 const query ="insert into articles (userId, title, image, content) values(?,?,?,?)";

The final result of our code:


javascript
router.post(
  "/add",
  upload.single("thumb"),
  authentication,
  (req, res, next) => {
    const { userId, title, content } = req.body;

    const image = req.file.path;

    const query =
      "insert into articles (userId, title, image, content) values(?,?,?,?)";

    dbConnection.query(
      query,
      [userId, title, image, content],
      (err, result) => {
        if (!err) {
          return res.status(200).json({ message: "article has been added" });
        } else {
          return res.status(500).json(err);
        }
      },
    );
  },
);

2. `/delete/:id` - For removing articles.

Define an HTTP DELETE route for "/delete/:id". This route will be used to remove an article from the database. Authentication is verified before allowing the execution of this route.


javascript
router.delete("/delete/:id", authentication, (req, res) => {
...
}

Get the id parameter from the URL using req.params. This id will be used to identify the article that will be removed from the database.


javascript
const id = req.params.id;

Write an SQL query to delete an article from the "articles" table in the database based on the provided id.


javascript
const query = "delete from articles where id=?";

Here is the final result of our code:


javascript
router.delete("/delete/:id", authentication, (req, res) => {
  const id = req.params.id;
  const query = "delete from articles where id=?";
  dbConnection.query(query, [id], (err, result) => {
    if (!err) {
      if (result.affectedRows == 0) {
        return res.status(404).json({ message: "article id does not found" });
      } else {
        return res.status(200).json({ message: "article deleted" });
      }
    } else {
      return res.status(500).json(err);
    }
  });
});

3. `/edit/:id` - Route to Edit Articles.

Define an HTTP PATCH route for "/edit/:id". This route will be used to update an article in the database. Authentication is verified before allowing the execution of this route.


javascript
router.patch("/edit/:id", authentication, (req, res) => {...}

We collect the id parameter from the URL and the article data from the request body (req.body). The id is used to identify the article that will be updated.


javascript
const id = req.params.id;
const article = req.body;

Write the SQL query to update an article in the "articles" table of the database based on the provided id.


javascript
const query = "update articles set title=?, content=? where id=?";

Here is the final result of our code:


javascript
router.patch("/edit/:id", authentication, (req, res) => {
  const id = req.params.id;
  const article = req.body;
  const query = "update articles set title=?, content=? where id=?";
  dbConnection.query(
    query,
    [article.title, article.content, id],
    (err, result) => {
      if (!err) {
        if (result.affectedRows == 0) {
          return res.status(404).json({ message: "article id does not found" });
        } else {
          return res
            .status(200)
            .json({ message: "article updated succesfullt" });
        }
      } else {
        return res.status(500).send({ message: "something went wrong" }, err);
      }
    },
  );
});

4. `/getAll` - Route for querying all Articles

Define a HTTP GET route for "/getAll". This route will be used to retrieve all the articles registered in the database.


javascript
router.get("/getAll", (req, res) => {}

Write an SQL query to select all fields from all articles in the "articles" table in the database.


javascript
const query = "SELECT * FROM articles";

Handle the query and the final result:


javascript
router.get("/getAll", (req, res) => {
  const query = "SELECT * FROM articles";
  dbConnection.query(query, (err, results) => {
    if (err) {
      res.status(500).send({ message: "could not get articles" });
    } else {
      const processedResults = results.map((article) => {
        const { content, ...rest } = article;
        const resumedContent = trucanteText(content, 5);
        return { content: resumedContent, ...rest };
      });
      res.json(processedResults);
    }
  });
});

5. `/getById/:id` - Route to get an Article by ID.

Define a HTTP GET route for "/getById/:id".


js
router.get("/getById/:id", (req, res) => {...}

Collect the id parameter from the URL using req.params.


js
const id = req.params.id;v

Write an SQL query to select all fields of the article from the "articles" table in the database where the id matches the id provided in the URL.


javascript
const query = "SELECT * FROM articles WHERE id=?";

Here is the final result of our code:


javascript
router.get("/getById/:id", (req, res) => {
  const id = req.params.id;
  const query = "SELECT * FROM articles WHERE id=?";
  dbConnection.query(query, [id], (err, results) => {
    if (err) {
      res.status(500).send({ message: "something whent wrong" }, err);
    } else if (results.length === 0) {
      res.status(404).send({ message: "article not found" });
    } else {
      res.json(results[0]);
    }
  });
});

Conclusion

First of all, I would like to thank you for dedicating your time to this tutorial, and congratulations on completing it! I hope it was helpful and easy to follow.

Feel free to explore more of your skills with this application. Some routes were intentionally left out so that you feel encouraged to write them yourself. If you're not sure where to start, here are a few suggestions:

Route for editing user data
Route for password recovery via email
Route for updating user password
Route for downloading a specific article in markdown format

This tutorial also covers the frontend of our application. After all, what's the point of having an API if you're not going to use it somewhere, right? So, move on to the next step, click here to continue our tutorial.

See you next time! o/

Building a Dynamic Blog Dashboard with Next.js

Vitor Alecrim — Fri, 06 Dec 2024 16:48:34 +0000

Introduction

Hello, how are you? This is Vítor, coming back with a new project to help you enhance your programming skills. It’s been a while since I last published a tutorial. Over the past few months, I took some time to rest and focus on other activities. During this period, I developed a small web project: a blog, which became the focus of this tutorial.

In this guide, we will create the frontend of a blog page capable of rendering Markdown. The application will include public and private routes, user authentication, and the ability to write Markdown text, add photos, display articles, and much more.

Feel free to customize your application however you prefer—I even encourage it.

You can access the repository for this application here:

Gondrak08 / blog-platform

A blog plataform made with Next.js/typescript.

Plataforma para blog

Tutorial em texto

Ingredientes

next-auth - biblioteca de autenticação para Next.js
github.com/markdown-it/markdown-it - markdown biblioteca.
github.com/sindresorhus/github-markdown-css- Para dar estilo ao nosso editor markdown.
github.com/remarkjs/react-markdown - Biblioteca para renderizar markdown em nosso componente react.
github.com/remarkjs/remark-react/tree/4722bdf - Plugin para transformar Markdown em React.
codemirror.net - Editor componente para web.
react-icons - lib de icones para react.

Como usar

npm i
npm run start

Server

você pode encontrar o servidor dessa aplicação em server

View on GitHub

This tutorial also includes the writing of the Node.js server that will be used in this guide:

I hope you enjoy it.

Happy coding!

Libraries

Here is a summary of the libraries used in this project:

next-auth - Authentication library for Next.js
github.com/markdown-it/markdown-it - Markdown library.
github.com/sindresorhus/github-markdown-css - For styling our Markdown editor.
github.com/remarkjs/react-markdown - Library for rendering Markdown in our React component.
github.com/remarkjs/remark-react/tree/4722bdf - Plugin to transform Markdown into React.
codemirror.net - Web component editor.
react-icons - Icon library for React.

Creating the React Project

We will use the latest version of the Next.js framework, which, at the time of writing this tutorial, is version 13.4.

Run the following command to create the project:

npx create-next-app myblog

During the installation, select the template settings. In this tutorial, I will use TypeScript as the programming language and the Tailwind CSS framework for styling our application.

Configuration

Now let's install all the libraries we will use.

Markdown

npm i  markdown-it @types/markdown-it markdown-it-style github-markdown-css react-markdown

React Remark

remark remark-gfm remark-react

Codemirror

npm @codemirror/commands @codemirror/highlight @codemirror/lang-javascript @codemirror/lang-markdown @codemirror/language @codemirror/language-data @codemirror/state @codemirror/theme-one-dark @codemirror/view

Icons

npm i react-icons @types/react-icons

Then clean up the initial structure of your installation by removing everything we won’t be using.

Architecture

This is the final structure of our application.

src-
  |- app/
  |    |-(pages)/
  |    |      |- (private)/
  |    |      |       |- (home)
  |    |      |       |- editArticle/[id]
  |    |      |       |
  |    |      |       |- newArticle
  |    |      | - (public)/
  |    |              | - article/[id]
  |    |              | - login
  |    |
  |   api/
  |    |- auth/[...nextAuth]/route.ts
  |    |- global.css
  |    |- layout.tsx
  |
  | - components/
  | - context/
  | - interfaces/
  | - lib/
  | - services/
middleware.ts

First Steps

Configuring next.config

In the root of the project, in the file next.config.js, let's configure the domain address from which we will access the images for our articles. For this tutorial, or if you're using a local server, we will use localhost.

Make sure to include this configuration to ensure the correct loading of images in your application.

const nextConfig = {
   images: {
    domains: ["localhost"],
  },
};

Configuring Middleware

In the root folder of the application src/, create a middleware.ts to verify access to private routes.

export { default } from "next-auth/middleware";
export const config = {
  matcher: ["/", "/newArticle/", "/article/", "/article/:path*"],
};

To learn more about middlewares and everything you can do with them, check the documentation.

Configuring Authentication Route

Inside the /app folder, create a file named route.ts in api/auth/[...nextauth]. It will contain the configuration for our routes, connecting to our authentication API using the CredentialsProvider.

The CredentialsProvider allows you to handle login with arbitrary credentials, such as username and password, domain, two-factor authentication, hardware device, etc.

First, in the root of your project, create a .env.local file and add a token that will be used as our secret.

.env.local
NEXTAUTH_SECRET = SubsTituaPorToken

Next, let's write our authentication system, where this NEXTAUTH_SECRET will be added to our secret in the src/app/auth/[...nextauth]/routes.ts file.

import NextAuth from "next-auth/next";
import type { AuthOptions } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import { authenticate } from "@/services/authService";
import refreshAccessToken from "@/services/refreshAccessToken";

export const authOptions: AuthOptions = {
  providers: [
    CredentialsProvider({
      name: "credentials",
      credentials: {
        email: {
          name: "email",
          label: "email",
          type: "email",
          placeholder: "Email",
        },
        password: {
          name: "password",
          label: "password",
          type: "password",
          placeholder: "Password",
        },
      },
      async authorize(credentials, req) {
        if (typeof credentials !== "undefined") {
          const res = await authenticate({
            email: credentials.email,
            password: credentials.password,
          });
          if (typeof res !== "undefined") {
            return { ...res };
          } else {
            return null;
          }
        } else {
          return null;
        }
      },
    }),
  ],

  session: { strategy: "jwt" },
  secret: process.env.NEXTAUTH_SECRET,
  callbacks: {
    async jwt({ token, user, account }: any) {
      if (user && account) {
        return {
          token: user?.token,
          accessTokenExpires: Date.now() + parseInt(user?.expiresIn, 10),
          refreshToken: user?.tokenRefresh,
        };
      }

      if (Date.now() < token.accessTokenExpires) {
        return token;
      } else {
        const refreshedToken = await refreshAccessToken(token.refreshToken);
        return {
          ...token,
          token: refreshedToken.token,
          refreshToken: refreshedToken.tokenRefresh,
          accessTokenExpires:
            Date.now() + parseInt(refreshedToken.expiresIn, 10),
        };
      }
    },
    async session({ session, token }) {
      session.user = token;
      return session;
    },
  },

  pages: {
    signIn: "/login",
    signOut: "/login",
  },
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

Authentication Provider

Let's create an authentication provider, a context, that will share our user's data across the pages of our private route. We will later use it to wrap one of our layout.tsx files.

Create a file in src/context/auth-provider.tsx with the following content:

'use client';
import React from 'react';
import { SessionProvider } from "next-auth/react";
export default function Provider({
    children,
    session
}: {
    children: React.ReactNode,
    session: any
}): React.ReactNode {
    return (
        <SessionProvider session={session} >
            {children}
        </SessionProvider>
    )
};

Global Styles

Overall, in our application, we will use Tailwind CSS to create our styling. However, in some places, we will share custom CSS classes between pages and components.

/*global.css*/
.container {
  max-width: 1100px;
  width: 100%;
  margin: 0px auto;
}

.image-container {
  position: relative;
  width: 100%;
  height: 5em;
  padding-top: 56.25%; /* Aspect ratio 16:9 (dividindo a altura pela largura) */
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 10px solid #f3f3f3;
  border-top: 10px solid #293d71;
  border-radius: 50%;
  animation: spinner 1.5s linear infinite;
}

Layouts

Now let's write the layouts, both private and public.

app/layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Provider from "@/context/auth-provider";
import { getServerSession } from "next-auth";
import { authOptions } from "./api/auth/[...nextauth]/route";
const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Markdown Text Editor",
  description: "Created by <@vitorAlecrim>",
};

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await getServerSession(authOptions);
  return (
    <Provider session={session}>
      <html lang="en">
        <body className={inter.className}>{children}</body>
      </html>
    </Provider>
  );
}

pages/layout.tsx

import Navbar from "@/components/Navbar";
export default function PrivatePagesLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <header className="w-full  ">
        <Navbar />
      </header>
      <div className="container">{children}</div>
    </>
  );
}

API Calls

Our application will make several calls to our API, and you can adapt this application to use any external API. In our example, we are using our local application. If you haven’t seen the backend tutorial and the server creation, check it out.

In src/services/, let's write the following functions:

authService.ts: function responsible for authenticating our user on the server.

export const authenticate = async ({
  email,
  password,
}: {
  email: string;
  password: string;
}) => {
  const response = await fetch(`http://localhost:8080/user/login`, {
    method: "POST",
    headers: {
      "content-type": "application/json",
    },
    body: JSON.stringify({
      email: email,
      password: password,
    }),
  });
  const user = await response.json();

  if (!response.ok) {
    throw new Error(user.message);
  }
  if (user) {
    return user;
  }

  return null;
};

2.refreshAccessToken.tsx:

export default async function refreshAccessToken(refreshToken: string) {
  const headers = {
    "Content-Type": "application/json",
  };

  const data = {
    refreshToken: refreshToken,
  };

  try {
    const res = await fetch("http://localhost:8080/user/refresh-token", {
      method: "POST",
      headers: headers,
      body: JSON.stringify(data),
    });

    console.log("new call token -->", res);
    const token = await res.json();
    return token;
  } catch (error) {
    console.error("error refreshing token", error);
    throw error;
  }
}

getArticles.tsx: function responsible for fetching all the articles saved in our database:

export default async function getArticals() {
  try {
    const res = await fetch("http://localhost:8080/articles/getAll", {
      cache: "no-cache",
    });
    const data = await res.json();
    return data;
  } catch (error) {
    console.log("something wrong just happend", error);
  }
}

postArticle.tsx: function responsible for submitting the article data to our server.

import { IProp } from "@/interfaces/services.interface";

export default async function postArtical(prop:IProp){
    const {token,title, doc,imageUrl} = prop;
    const formData = new FormData();
    formData.append('title',title);
    formData.append('thumb', imageUrl);
    formData.append('content', doc);

    const headers = {
        'x-access-token': token
    };

    try{
        const res = await fetch('http://localhost:8080/articles/add',{
            method:'POST',
            headers:headers,
            body:formData
        })
        const result = await res.json();
        return result;
    } catch(error){
        console.log('Error:', error);
        console.log('something wrong just happend', await error);
    }
}

editArticle.tsx: function responsible for modifying a specific article within the database.

import { IProp } from "@/interfaces/services.interface";
export default async function editArtical(prop: IProp) {
  const { id, token, imageUrl, title, doc } = prop;
  const formData = new FormData();
  formData.append("title", title);
  formData.append("thumb", imageUrl);
  formData.append("content", doc);

  const headers = {
    "x-access-token": token,
  };

  try {
    const res = await fetch(`http://localhost:8080/articles/edit/${id}`, {
      method: "PATCH",
      headers: headers,
      body: formData,
    });
    const result = await res.json();
    return result;
  } catch (error) {
    console.log("Error:", error);
    console.log("something wrong just happend", await error);
    throw error;
  }
}

deleteArticle.tsx: function responsible for removing a specific article from our database.

interface IProp {
  id: number;
  token: string;
}

export default async function deleteArtical(prop: IProp) {
  const { id, token } = prop;

  const headers = {
    "x-access-token": token,
  };

  try {
    const res = await fetch(`http://localhost:8080/articles/delete/${id}`, {
      method: "DELETE",
      headers: headers,
    });
    const result = await res.json();
    return result;
  } catch (error) {
    console.log("Error:", error);
    console.log("something wrong just happend", await error);
  }
}

Components

Next, let's write each component used throughout the application.

Components/Navbar.tsx

A simple component with two navigation links.

import { TfiWrite } from "react-icons/tfi";
import { BsNewspaper } from "react-icons/bs";
import Link from "next/link";
import SignOutButton from "./SignOutButton";
export default function Navbar() {
  const linkStyle = "flex items-center  gap-2 hover:text-slate-600";
  return (
    <section className="container h-fit px-24 py-5">
      <div className="flex items-center justify-between  px-6">
        <div className="flex iems-center gap-8">
          <Link href="/" className={linkStyle}>
            <BsNewspaper className="w-[3em] h-[3em] font-light" />
          </Link>
          <Link href="/newArticle" className={linkStyle}>
            <TfiWrite className="text-sm w-[2.5em] h-[2.5em]" />
            <span className="text-[14px]">Escreva</span>
          </Link>
        </div>
        <SignOutButton />
      </div>
    </section>
  );
}

Components/Loading.tsx

A simple loading component, used while waiting for API calls to complete.

export default function Loading() {
  return (
    <div className="loading-container w-full h-fit flex items-center justify-center">
      <div className="spinner-container">
        <div className="loading-spinner"></div>
      </div>
    </div>
  );
}

Components/Pagination.tsx

A pagination component used on our page displaying all of our articles, in our private route. You can find a more detailed article on how to write this component here

import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';

interface IPagination {
  currentPage: number;
  totalPages: number;
  onPageChange: (pageNumber: number) => void;
}

export default function Pagination(props: IPagination) {
  const { currentPage, totalPages, onPageChange } = props;

  const handlePrevClick = () => {
    if (currentPage > 0) {
      onPageChange(currentPage - 1);
    }
  };

  const handleNextClick = () => {
    if (currentPage < totalPages - 1) {
      onPageChange(currentPage + 1);
    }
  };

  const getPageNumbers = () => {
    const visiblePageCount = 4;
    const pageNumbers: number[] = [];

    if (totalPages <= visiblePageCount) {
      pageNumbers.push(...Array.from({ length: totalPages }, (_, i) => i + 1));
    } else {
      const firstPage = 0;
      const lastPage = totalPages - 1;

      const midPageCount = visiblePageCount - 2;

      const step = Math.floor(midPageCount / 2);
      pageNumbers.push(firstPage);

      if (currentPage < firstPage + step) {
        pageNumbers.push(...Array.from({ length: Math.min(midPageCount, totalPages) }, (_, i) => firstPage + i + 1));
      } else if (currentPage > lastPage - step) {
        pageNumbers.push(...Array.from({ length: Math.min(midPageCount, totalPages) }, (_, i) => lastPage - midPageCount + i));
      } else {
        const start = currentPage - step;
        pageNumbers.push(...Array.from({ length: midPageCount }, (_, i) => start + i + 1));
      }

      pageNumbers.push(lastPage + 1);
    }

    return pageNumbers;
  };

  const pageNumbers = getPageNumbers();

  return (
    <nav className="flex mx-auto w-fit">
      <ul id="pagination" className="flex items-center font-epilogue font-[500] text-[14px] border border-mv-gray-300 rounded-xl">
        <li className="border-r-[1px] border-r-mv-gray-300">
          <button
            className={`page-item text-sm md:text-md p-2 rounded-md flex items-center gap-3
              ${currentPage === 0 ? 'disable cursor-not-allowed text-mv-blue-200' : 'text-mv-blue-600'}`}
            onClick={handlePrevClick}
            disabled={currentPage === 0}
          >
            <FaArrowLeft className="text-mv-blue-200" />
            Anterior
          </button>
        </li>

        <div className="flex h-full w-full items-center justify-center">
          {pageNumbers.map((pageNumber) => (
            <li
              key={pageNumber - 1} 
              className={`page-item flex items-center w-full h-full border-r-[1px] border-r-mv-gray-300 last:border-r-0
                            ${pageNumber === currentPage + 1 ? 'active text-mv-blue-600' : 'text-mv-blue-200'}`}
            >
              <button className="page-link w-full h-full px-4" onClick={() => onPageChange(pageNumber - 1)}>
                {pageNumber}
              </button>
            </li>
          ))}
        </div>

        <li className="border-l-[1px] border-r-mv-gray-300">
          <button
            className={`page-item text-sm md:text-md p-2 rounded-md flex items-center gap-3 font- ${currentPage === totalPages - 1 ? 'disable cursor-not-allowed text-mv-blue-200' : '  text-mv-blue-600'
              }`}
            onClick={handleNextClick}
            disabled={currentPage === totalPages - 1}
          >
            Próxima
            <FaArrowRight className="text-mv-blue-200" />
          </button>
        </li>
      </ul>
    </nav>
  );
}

Components/SignOutButton

A button component for logging the user out of the application.

"use client";
import React from "react";
import { signOut } from "next-auth/react";
import { BiExit } from "react-icons/bi";

const SignOutButton = () => {
  return (
    <div className="h-fit w-fit flex items-center gap-1">
      sair
      <BiExit
        className="text-slate-500 hover:text-slate-600 w-7 h-7 cursor-pointer"
        onClick={() => {
          signOut({ redirect: true, callbackUrl: "/login" });
        }}
      />
    </div>
  );
};

export default SignOutButton;

Components/ArticleCard.tsx

A card component for displaying written articles.

This component also contains a link that will lead to both the article display page and the page for editing a previously written article.

import Image from "next/image";
import MarkdownIt from "markdown-it";
import Link from "next/link";
import { AiOutlineEdit } from "react-icons/ai";

export interface IArticleCard {
  id: number;
  title: string;
  description: string | null;
  image: string;
  link: string;
}

export default function ArticleCard({
  id,
  title,
  description,
  image,
}: IArticleCard) {
  const md = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: true,
  });
  const mdTitle = md.render(title);
  const mdDescription = description && md.render(description);
  return (
    <div id="article-card" className="w-full h-full relative ">
      <Link
        href={`editArticle/${id}`}
        className="w-fit h-fit absolute z-30 top-3 right-3"
      >
        <AiOutlineEdit className="w-8 h-8  text-white hover:text-yellow-200" />
      </Link>

      <Link
        href={`article/${id}`}
        rel="noopener noreferrer"
        className="flex flex-col gap-2 w-full h-full shadow-xl hover:shadow-2xl z-10"
      >
        <div className="image-container relative">
          <Image
            src={image}
            alt={title}
            className="absolute object-contain w-full h-full"
            fill
          />
        </div>
        <div className="p-2 h-full relative">
          <div
            className="text-sm md:text-[15px]"
            dangerouslySetInnerHTML={{ __html: mdTitle }}
          />
          {mdDescription && (
            <div dangerouslySetInnerHTML={{ __html: mdDescription }} />
          )}
        </div>
      </Link>
        </div>
  );
}

Components/PreviewText.tsx

A component responsible for displaying the text we are writing in our editor. It uses a different library from article. If you prefer, you can adapt the component to use the same library.

import React from "react";
import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkGfm from "remark-gfm";
import remarkReact from "remark-react";
import Image from "next/image";
interface Props {
  doc: string;
  title: string;
  previewImage: string;
  onPreview: () => void;
}
const Preview: React.FC<Props> = (props) => {
  const md: any = unified()
    .use(remarkParse)
    .use(remarkGfm)
    .use(remarkReact as any, React)
    .processSync(props.doc).result;

  return (
    <section className='h-[50em] w-full flex flex-col gap-5'>
      <div className='w-full'>
        <button onClick={() => props.onPreview()}>X</button>
      </div>
      {props.previewImage.length > 0 && (
        <div className='w-full h-[10em] relative'>
          <Image
            alt='prev-image'
            layout='fill'
            className='w-[10em] h-[10em] object-cover bg-center bg-no-repeat absolute'
            src={props.previewImage}
          />
        </div>
      )}
      <div className='w-full h-full'>
        <div className=''>
          <h1 className='text-black text-2xl'>{props.title}</h1>
        </div>
        <div className='preview markdown-body text-black h-full'>
          Preview {md}{" "}
        </div>
      </div>
    </section>
  );
};
export default Preview;

Components/ArticleList.tsx

A component responsible for making API calls and displaying the response.

Here, we will use two API calls through the functions we wrote:

getArticles.ts - returns all the articles that will be displayed in the component.
removeArticle - removes a specific article from our list and from our server.

We will use the Pagination.tsx component, previously written, to split the number of articles across pages.

"use client";
import { useState, useEffect } from "react";
import { useSession } from "next-auth/react";
import { redirect } from "next/navigation";
import getArticals from "@/services/getArticles";
import { IArticle } from "@/interfaces/article.interface";
import ArticleCard from "./articleCard";
import Pagination from "./Pagination";
import Loading from "./Loading";
import {MdOutlineAutoDelete} from 'react-icons/md'
import deleteArtical from "@/services/deleteArticle";

const ArticleList = () => {
  const linkStyle = "flex items-center  gap-2 hover:text-slate-600";
  const { data: session }: any = useSession({
    required: true,
    onUnauthenticated() {
      redirect("/login");
    },
  });

  const [articles, setArticles] = useState<IArticle[]>([]);
  const [currentPage, setCurrentPage] = useState<number>(0);
  const handlePageChange = (pageNumber: number) => {
    setCurrentPage(pageNumber);
  };
  const itemsPerPage: number = 10;
  const paginatedItems: any[] = [];

  for (let i = 0; i < articles.length; i += itemsPerPage) {
    paginatedItems.push(articles.slice(i, i + itemsPerPage));
  }

  const articlesToDisplay = paginatedItems[currentPage]?.slice(0, 8);

 async function removeArticle(id: number) {
    const token: string = session?.user?.token;
    const deleteArr = await deleteArtical({ id, token });
    console.log(deleteArr?.ok);
    if(deleteArr?.ok){
      const filter = articles.filter((article: IArticle, index: number) =>
      article.id !== id ? id : null,
      );
     setArticles(filter);
    }
  }

  useEffect(() => {
    const getData = async () => {
      const data = await getArticals();
      setArticles(data.reverse());
    };
    getData();
  }, [articles]);

  if (articles.length === 0) return <Loading />;

  return (
    <section
      className="
      w-full h-full px-5"
    >
      <h1 className="text-2xl text-slate-800 text-bold my-3">Seus textos</h1>
      <div className="w-full border border-slate-300 my-3"/>
      <div className="h-full grid md:grid-cols-2 lg:grid-cols-3  xl:grid-cols-4 md:gap-2 xl:gap-3 ">
        {Array.isArray(articlesToDisplay) &&
          articlesToDisplay.map((article: IArticle, index: number) => {
            return (
              <div key={index} className="relative w-full h-full">
                <ArticleCard
                  id={article.id}
                  image={`http://localhost:8080/` + article.image}
                  description={article.content}
                  title={article.title}
                  key={index}
                  link={"#"}
                />{" "}
                <div
                  onClick={() => removeArticle(article.id)}
                  className="absolute right-2 bottom-2 z-30 w-fit h-fit"
                >
                 <MdOutlineAutoDelete className="w-5 h-5 hover:text-red-500" />
                </div>
              </div>
            );
          })}
      </div>

      <div className="w-full py-5  border border-transparent border-t-mv-gray-200">
        <Pagination
          currentPage={currentPage}
          totalPages={paginatedItems.length}
          onPageChange={handlePageChange}
        />
      </div>
    </section>
  );
};
export default ArticleList;

Components/TextEditor.tsx

For the creation of our text editor, we will use the codemirror library.

This library will enable the editor to process Markdown writing.

We start by importing the library and then writing the component.

"use client";
import { useCallback, useEffect } from "react";
import useCodeMirror from "@/lib/use-codemirror";

interface Props {
  initialDock: string;
  onChange: (doc: string) => void;
}

const TextEditor: React.FC<Props> = (props) => {
  const { onChange, initialDock } = props;
  const handleChange = useCallback(
    (state: any) => onChange(state.doc.toString()),
    [onChange],
  );
  const [refContainer, editorView] = useCodeMirror<HTMLDivElement>({
    initialDoc: initialDock,
    onChange: handleChange,
  });
  useEffect(() => {
    if (editorView) {
      console.log(editorView);
    }
  }, [editorView]);

  return (
    <section className="h-full w-full">
      <div
        className="editor-wrapper  h-full w-full mx-auto flex flex-col gap-2"
        ref={refContainer}
      />
    </section>
  );
};

export default TextEditor;

Pages

Next, we will go through each of our pages, divided by their respective routes.

Public Pages

Login

This is the homepage of our application. It is a simple page, and you can modify it as you see fit. On this page, we will use the signin function provided by the next-auth navigation library.

In the file src/app/pages/public/login/page.tsx.

"use client";
import { ChangeEvent, FormEvent, useState } from "react";
import { signIn } from "next-auth/react";

export default function Page() {
  const inputStyle =
    "p-2 border border-1 border-slate-300 rounded-md text-black";

  const [formValues, setFormValues] = useState<{
    email: string;
    password: string;
  }>({
    email: "",
    password: "",
  });

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value }: { name: string; value: string } = e.target;
    setFormValues({ ...formValues, [name]: value });
  };

  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const res = await signIn("credentials", {
      email: formValues.email,
      password: formValues.password,
      redirect: true,
      callbackUrl: `${window.location.origin}/`,
    });
    console.log("res--->", res);
  };

  return (
    <main className="flex flex-col  min-h-screen w-full  px-24">
      <section className="container mx-auto min-h-screen h-full flex items-center justify-center">
        <div className=" bg-white h-[20em] rounded-md p-3 drop-shadow-md ">
          <div className="flex flex-col gap-2 items-center py-5">
            <h1 className="text-blue-500 text-5xl">W</h1>
            <span className="text-slate-400">Entrar em seu blog</span>
          </div>
          <form
            onSubmit={(e: any) => {
              onSubmit(e);
            }}
            className="w-full flex flex-col gap-2"
          >
            <input
              onChange={(e: any) => handleChange(e)}
              name="email"
              type="email"
              placeholder="Email"
              value={formValues.email}
              className={inputStyle}
            />
            <input
              onChange={(e: any) => handleChange(e)}
              name="password"
              type="password"
              placeholder="Password"
              value={formValues.password}
              className={inputStyle}
            />
            <button className="mt-2 border border-slate-400 hover:bg-blue-500 text-blue-500 hover:text-white w-fit p-2 self-start rounded-md   text-[14px] font-openSans ">
              Entrar
            </button>
          </form>
        </div>
      </section>
    </main>
  );
}

Article Page

To create the article reading page, we will develop a dynamic page.

Every blog platform you've visited likely has a dedicated page for reading articles, accessible via URL. The reason for this is a dynamic page route. Fortunately, Next.js makes this easy with its new AppRouter method, making our lives much simpler.

First: we need to create the route in our structure by adding a [id] folder. This will result in the following structure: pages/(public)/articles/[id]/pages.tsx.

The id corresponds to the slug of our navigation route.
params is a property passed through the tree of our application containing the navigation slug.

export default function Page({ params }: { params: any }) {
  const id: number = params.id;
...

Second: use the MarkdownIt library to enable the page to display text in Markdown format.

import MarkdownIt from "markdown-it";
import "github-markdown-css/github-markdown.css";

And finally,

once the page is ready, by accessing, for example, localhost:3000/articles/1 in the browser, you will be able to view the article with the provided ID.

In our case, the ID will be passed through navigation when clicking on one of the ArticleCards.tsx components, which will be rendered on the main page of our private route.

"use client";
import { useState, useEffect } from "react";
import { IArticle } from "@/interfaces/article.interface";
import Image from "next/image";

import MarkdownIt from "markdown-it";
import "github-markdown-css/github-markdown.css";

export default function Page({ params }: { params: any }) {
  const id: number = params.id;
  const [article, setArticle] = useState<IArticle | null>(null);

  const fetchArticle = async (id: number) => {
    try {
      const response = await fetch(
        `http://localhost:8080/articles/getById/${id}`,
      );
      const jsonData = await response.json();
      setArticle(jsonData);
    } catch (err) {
      console.log("something went wrong:", err);
    }
  };

  useEffect(() => {
    if (article !== null || article !== undefined) {
      fetchArticle(id);
    }
  }, [id, article]);

  if (article === null) return null;

  const md = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: true,
  });

  const mdTitle: string = md.render(article.title);
  const mdContent: string = md.render(article.content);

  return (
    <section className="min-h-screen">
      <section className="w-full container mx-auto">
        <div className="container h-[20em] relative ">
          <Image
            src={`http://localhost:8080/` + article?.image}
            alt="hero image"
            fill={true}
            className="w-full h-full z-1 object-cover bg-center bg-no-repeat"
          />
        </div>
        <>
          <div className="markdown-body p-5">
            <div
              className="text-4xl"
              dangerouslySetInnerHTML={{ __html: mdTitle }}
            />
            <div dangerouslySetInnerHTML={{ __html: mdContent }} />
          </div>
        </>
      </section>
    </section>
  );
}

Private Pages

Here are our private pages, which can only be accessed once the user is authenticated in our application.

Home

Inside our app/pages/ folder, when a file is declared inside (), it means that route corresponds to /.

In our case, the (Home) folder refers to the homepage of our private route. It is the first page the user sees upon authenticating into the system. This page will display the list of articles from our database.

The data will be processed by our ArticlesList.tsx component. If you haven’t written this code yet, refer back to the components section.

In app/(pages)/(private)/(home)/page.tsx.

import ArticleList from "@/components/ArticlesList";
export default function Home() {
  return (
    <main className="flex flex-col  min-h-screen w-full  px-24">
      <section className="w-full h-full min-h-[92vh]">
        <ArticleList />
      </section>
    </main>
  );
}

New Article

This is one of the most important pages of our application, as it allows us to register our articles.

This page will enable the user to:

Write an article in Markdown format.
Assign an image to the article.
Preview the Markdown text before submitting it to the server.

The page uses several hooks:

useCallback - used to memoize functions.
useState - allows you to add a state variable to our component.
useSession - lets us check if the user is authenticated and obtain the authentication token.

For this, we will use two components:

TextEditor.tsx: the text editor we wrote previously.
Preview.tsx: a component for displaying files in Markdown format.

While constructing this page, we will make use of our API:

POST: Using our function postArticle, we will send the article to the server.

We will also use the useSession hook, provided by the next-auth library, to obtain the user's authentication token, which will be used to register the article on the server.

This will involve three distinct API calls.
In app/pages/(private)/newArticle/page.tsx.

"use client";
import React, { ChangeEvent, useCallback, useState } from "react";
import { useSession } from "next-auth/react";
import { redirect } from "next/navigation";
import postArtical from "@/services/postArticle";
import { AiOutlineFolderOpen } from "react-icons/ai";
import { RiImageEditLine } from "react-icons/ri";

import Image from "next/image";
import TextEditor from "@/components/textEditor";
import Preview from "@/components/PreviewText";
import { AiOutlineSend } from "react-icons/ai";
import { BsBodyText } from "react-icons/bs";

export default function NewArticle(params:any) {
  const { data: session }: any = useSession({
    required: true,
    onUnauthenticated() {
      redirect("/login");
    },
  });
  const [imageUrl, setImageUrl] = useState<object>({});
  const [previewImage, setPreviewImage] = useState<string>("");
  const [previewText, setPreviewText] = useState<boolean>(false);
  const [title, setTitle] = useState<string>("");
  const [doc, setDoc] = useState<string>("# Escreva o seu texto... \n");
  const handleDocChange = useCallback((newDoc: any) => {
    setDoc(newDoc);
  }, []);

  if (!session?.user) return null;

  const handleArticleSubmit = async (e:any) => {
        e.preventDefault();
    const token: string = session.user.token;
    try {
      const res = await postArtical({
        id: session.user.userId.toString(),
        token: token,
        imageUrl: imageUrl,
        title: "title,"
        doc: doc,
      });
      console.log('re--->', res);
      redirect('/success');
    } catch (error) {
      console.error('Error submitting article:', error);
      // Handle error if needed
      throw error;
    }
  };

  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      const file = e.target.files[0];
      const url = URL.createObjectURL(file);
      setPreviewImage(url);
      setImageUrl(file);
    }
  };

  const handleTextPreview = (e: any) => {
    e.preventDefault();
    setPreviewText(!previewText);
  };
  return (
    <section className="w-full h-full min-h-screen relative py-8">
      {previewText && (
        <div className="absolute right-16 top-5 p-5 border-2 border-slate-500 bg-slate-100 rounded-xl w-full max-w-[33em] z-30">
          <Preview
            doc={doc}
            title={title}
            previewImage={previewImage}
            onPreview={() => setPreviewText(!previewText)}
          />
        </div>
      )}

      <form className="relative mx-auto max-w-[700px] h-full min-h-[90%] w-full p-2 border-2 border-slate-200 rounded-md  bg-slate-50 drop-shadow-xl flex flex-col gap-2 ">
        {" "}
        <div className="flex justify-between items-center">
          <button
            className="border-b-2 rounded-md border-slate-500 p-2 flex items-center gap-2  hover:border-slate-400 hover:text-slate-800"
            onClick={handleTextPreview}
          >
            <BsBodyText />
            Preview
          </button>{" "}
          <button
            className="group border border-b-2 border-slate-500 rounded-md p-2 flex items-center gap-2 hover:border-slate-400 hover:text-slate-800 "
            onClick={handleArticleSubmit}
          >
            Enviar Texto
            <AiOutlineSend className="w-5 h-5 group-hover:text-red-500" />
          </button>
        </div>
        <div className="header-wrapper flex flex-col gap-2 ">
          <div className="image-box">
            {previewImage.length === 0 && (
              <div className="select-image">
                <label
                  htmlFor="image"
                  className="p-4 border-dashed border-4 border-slate-400 cursor-pointer flex flex-col items-center justify-center"
                >
                  <AiOutlineFolderOpen className="w-7 h-7" />
                  drang and drop image
                </label>
                <input
                  id="image"
                  name="thumb"
                  type="file"
                  multiple
                  className="w-full h-5"
                  style={{ display: "none" }}
                  onChange={handleImageChange}
                />
              </div>
            )}
            {previewImage.length > 0 && (
              <div className="w-full h-[10em] relative">
                <div className="absolute top-0 left-0 w-full h-full cursor-pointer transition-opacity bg-transparent hover:bg-[#00000036] z-30" />
                <RiImageEditLine className="w-[3em] h-[3em] absolute right-1 z-30 text-slate-300 " />
                <Image
                  alt="prev-image"
                  layout="fill"
                  className="w-[10em] h-[10em] object-cover bg-center bg-no-repeat "
                  src={previewImage}
                />
              </div>
            )}
          </div>

          <div className="flex justify-between w-full">
            <input
              name="title"
              type="text"
              placeholder="Título"
              onChange={(e: ChangeEvent<HTMLInputElement>) =>
                setTitle(e.target.value)
              }
              className="border-x-2 border-b w-full p-2"
            />
          </div>
        </div>
        <TextEditor initialDock={doc} onChange={handleDocChange} />
      </form>
    </section>
  );
}

Edit Article

A page similar to New Article (newArticle), with some differences.

First, we define a dynamic route where we receive an id as a navigation parameter. This is very similar to what was done on the article reading page.
app/(pages)/(private)/editArticle/[id]/page.tsx

"use client";
import React, { useState, useEffect, useCallback, useRef, ChangeEvent } from "react";
import { useSession } from "next-auth/react";
import { redirect } from "next/navigation";
import Image from 'next/image';

import { IArticle } from "@/interfaces/article.interface";
import { AiOutlineEdit } from "react-icons/ai";
import { BsBodyText } from "react-icons/bs";
import { AiOutlineFolderOpen } from "react-icons/ai";
import { RiImageEditLine } from "react-icons/ri";

import Preview from "@/components/PreviewText";
import TextEditor from "@/components/textEditor";
import Loading from '@/components/Loading';
import editArtical from "@/services/editArticle";

export default function EditArticle({ params }: { params: any }) {
 const { data: session }: any = useSession({
    required: true,
    onUnauthenticated() {
      redirect("/login");
    },
  });
  const id: number = params.id;
  const [article, setArticle] = useState<IArticle | null>(null);
  const [imageUrl, setImageUrl] = useState<object>({});
  const [previewImage, setPreviewImage] = useState<string>("");
  const [previewText, setPreviewText] = useState<boolean>(false)
  const [title, setTitle] = useState<string>("");
  const [doc, setDoc] = useState<string>('');
  const handleDocChange = useCallback((newDoc: any) => {
    setDoc(newDoc);
  }, []);
  const inputRef= useRef<HTMLInputElement>(null);

  const fetchArticle = async (id: number) => {
    try {
      const response = await fetch(
        `http://localhost:8080/articles/getById/${id}`,
      );
      const jsonData = await response.json();
      setArticle(jsonData);
    } catch (err) {
      console.log("something went wrong:", err);
    }
  };
  useEffect(() => {
    if (article !== null || article !== undefined) {
      fetchArticle(id);
    }
  }, [id]);

  useEffect(()=>{
    if(article != null && article.content){
        setDoc(article.content)
    }

    if(article !=null && article.image){
      setPreviewImage(`http://localhost:8080/` + article.image)
    }
  },[article])

  const handleArticleSubmit = async (e:any) => {
     e.preventDefault();
    const token: string = session.user.token;
    try{
      const res = await editArtical({
      id: id,
      token: token,
      imageUrl:imageUrl,
      title: title,
      doc: doc,
      });
        console.log('re--->',res)
        return res;
    } catch(error){
    console.log("Error:", error)
    }
  };
  const handleImageClick = ()=>{
      console.log('hiii')
    if(inputRef.current){
      inputRef.current.click();
    }
  }
  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      const file = e.target.files[0];
      const url = URL.createObjectURL(file);
      setPreviewImage(url);
      setImageUrl(file);
    }

  };
   const handleTextPreview = (e: any) => {
    e.preventDefault();
    setPreviewText(!previewText);
    console.log('hello from preview!')
  };

  if(!article) return <Loading/>
  if(article?.content)
  return (
    <section className='w-full h-full min-h-screen relative py-8'>
      {previewText && (
        <div className="absolute right-16 top-5 p-5 border-2 border-slate-500 bg-slate-100 rounded-xl w-full max-w-[33em] z-30">
          <Preview
            doc={doc}
            title={title}
            previewImage={previewImage}
            onPreview={() => setPreviewText(!previewText)}
          />
        </div>
      )}

      <div className='relative mx-auto max-w-[700px] h-full min-h-[90%] w-full p-2 border-2 border-slate-200 rounded-md  bg-white drop-shadow-md flex flex-col gap-2'>
        <form className='relative mx-auto max-w-[700px] h-full min-h-[90%] w-full p-2 border-2 border-slate-200 rounded-md  bg-slate-50 drop-shadow-md flex flex-col gap-2 '>
          {" "}
          <div className='flex justify-between items-center'>
            <button
              className='border-b-2 rounded-md border-slate-500 p-2 flex items-center gap-2  hover:border-slate-400 hover:text-slate-800'
              onClick={handleTextPreview}
            >
              <BsBodyText />
              Preview
            </button>{" "}
            <button
              className='group border border-b-2 border-slate-500 rounded-md p-2 flex items-center gap-2 hover:border-slate-400 hover:text-slate-800 '
              onClick={handleArticleSubmit}
            >
                Edite artigo 
              <AiOutlineEdit className='w-5 h-5 group-hover:text-red-500' />
            </button>
          </div>
          <div className='header-wrapper flex flex-col gap-2 '>
            <div className='image-box'>
              {previewImage.length === 0 && (
                <div className='select-image'>
                  <label
                    htmlFor='image'
                    className='p-4 border-dashed border-4 border-slate-400 cursor-pointer flex flex-col items-center justify-center'
                  >
                    <AiOutlineFolderOpen className='w-7 h-7' />
                    drang and drop image
                  </label>
                  <input
                    id='image'
                    name='thumb'
                    type='file'
                    multiple
                    className='w-full h-5'
                    style={{ display: "none" }}
                    onChange={handleImageChange}
                  />
                </div>
              )}
              {previewImage.length > 0 && (
                <div className='w-full h-[10em] relative'>
                  <div className='absolute top-0 left-0 w-full h-full cursor-pointer transition-opacity bg-transparent hover:bg-[#00000036] z-30'onClick={handleImageClick} />
                  <RiImageEditLine className='w-[3em] h-[3em] absolute right-1 z-30 text-slate-300' />
                  <Image
                    alt='prev-image'
                    layout='fill'
                    className='w-[10em] h-[10em] object-cover bg-center bg-no-repeat'
                    src={previewImage}
                  />
                  <input
                    id='image'
                    name='thumb'
                    type='file'
                    multiple
                    ref={inputRef}
                    className='w-full h-full' 
                    style={{ display: "none" }}
                    onChange={handleImageChange}
                  />
                </div>
              )}
            </div>

            <div className='flex justify-between w-full'>
              <input
                name='title'
                type='text'
                placeholder='Título'
                defaultValue={article?.title}
                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                  setTitle(e.target.value)
                }
                className='border-x-2 border-b w-full p-2'
              />
            </div>
          </div>
         {doc &&(<TextEditor initialDock={doc} onChange={handleDocChange} />)} 
        </form>
      </div>
    </section>
  );

  else return  null
}

Conclusion

First, I would like to thank you for taking the time to read this tutorial, and I also want to congratulate you on completing it. I hope it served you well and that the step-by-step instructions were easy to follow.

Second, I’d like to highlight a few points about what we just built. This is the foundation of a blog system, and there’s still much to add, such as a public page displaying all articles, a user registration page, or even a custom 404 error page. If, during the tutorial, you wondered about these pages and missed them, know that this was intentional. This tutorial provided you with enough experience to create these new pages on your own, add many others, and implement new features.

Thank you very much, and until next time. o/

Building a Dynamic Blog Dashboard with Next.js

Vitor Alecrim — Thu, 05 Dec 2024 19:10:25 +0000

Desenvolvendo seu próprio Blog com Next.js e Node.js

Vitor Alecrim — Fri, 01 Dec 2023 18:55:19 +0000

Apresentação

Olá, como vai? Aqui é o Vítor, retornando com um novo projeto para ajudá-lo a aprimorar suas habilidades de programador. Já faz um tempo desde que publiquei um tutorial. Nos últimos meses, tirei um tempo para descansar e me dedicar a outras atividades. Durante esse período, desenvolvi um pequeno projeto web: UM BLOG

Certo?

Eu sei que parece não ser grande coisa, mas acredite, é incrível para testar as suas habilidades.

Neste projeto você vai trabalhar tanto com o frontend quanto com o backend.
Vamos abordar tópicos como autenticação de usuários com Jsonwebtoken, escrita de rotas HTTP, escrita de consultas SQL, navegação de rotas privadas, conexão de um servidor Node.js com um banco de dados MySQL e muito mais.

Divirta-se o/

twitter.com

Gondrak08 (Vitor Alecrim) · GitHub

Hi! Here is my mail: vitor.alecrim.p@gmail.com. Gondrak08 has 34 repositories available. Follow their code on GitHub.

github.com

Flat-co

Vitor Alecrim personal Website

flat-co.netlify.app

Servidor para Blog, com Autenticação JWT - Node.Js & Mysql

Vitor Alecrim — Fri, 01 Dec 2023 18:33:12 +0000

Apresentação

Olá, como vai? Eu sou o Vitor e estou de volta com um novo projeto. Já se passou algum tempo desde o meu último tutorial, pois estive ocupado com outras atividades nos últimos meses. No entanto, é hora de retornarmos ao fascinante mundo do código.

Hoje, vamos criar um servidor em Node.js para uma página de blog. Nosso servidor terá a capacidade de registrar usuários e autenticá-los usando JWT. Além disso, abordaremos temas como registro, consultas, edição e remoção de dados, como texto e imagens, do banco de dados MySQL.

Com a sua API pronta, você poderá alimentar a sua aplicação frontend. Caso ainda não tenha um site, siga para o tutorial de frontend*.

Ao longo deste tutorial, vou me esforçar para ser o mais sucinto e claro possível.

Você pode acessar o código fonte em:

Gondrak08 / blog-nodejs-server

A blog server made with Node.js and Mysql. This is part of a tutorial project.

Servidor para Blog - Node.js & Mysql.

Tutorial em texto;

Ingredientes

bcryptjs - uma biblioteca de criptografia para senhas.
cors - uma middleware que nos permite lidar com Cross-Origin Resource Sharing (CORS).
dotenv - um módulo que nos possibilita acessar variáveis em arquivos '.env'.
express - uma biblioteca que nos permite criar APIs RESTful.
jsonwebtoken - uma biblioteca para a criação dos nossos tokens de autenticação.
multer - o Multer é uma biblioteca que nos permitirá salvar imagens em nosso servidor.
mysql - uma biblioteca de conexão com o banco de dados MySQL.

Como usar

Instalando aplicação.

npm i

Conectando ao Banco de dados

Lembre-se de configurar a sua conexão ao banco de dados Mysql Em connection.js

const mysql = require("mysql");
const dbConfig = {
  host: "localhost",
  user: "your db user",
  password: "your db password",
  database: "your

…

View on GitHub

Espero que você se divirta.

Bom código.

Bibliotecas

Aqui estão as bibliotecas que utilizaremos em nossa aplicação.

bcryptjs - uma biblioteca de criptografia para senhas.
cors - uma middleware que nos permite lidar com Cross-Origin Resource Sharing (CORS).
dotenv - um módulo que nos possibilita acessar variáveis em arquivos '.env'.
express - uma biblioteca que nos permite criar APIs RESTful.
jsonwebtoken - uma biblioteca para a criação dos nossos tokens de autenticação.
multer - o Multer é uma biblioteca que nos permitirá salvar imagens em nosso servidor.
mysql - uma biblioteca de conexão com o banco de dados MySQL.

Arquitetura

A estrutura de pastas e arquivos de nossa aplicação.

server
  |
  |- middleware/
  |      |- auth.js
  |      |- upload.js
  |
  |- routes/
  |      |- user.js
  |      |- article.js
  |
  |- uploads/
  |- utils/
  |      |- trucantText.js
  |
  |- connection.js
  |- server.js
  |- tables.sql

Banco de dados

Antes de prosseguirmos com nossa aplicação, é necessário criar o banco de dados. Utilizaremos o banco de dados MySQL para desenvolver nosso projeto. Você pode optar pela plataforma de gerenciamento de banco de dados com a qual estiver mais familiarizado, como DBeaver, entre outras.

No meu caso, vou utilizar o terminal:

Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 14
Server version: 8.0.35-0ubuntu0.22.04.1 (Ubuntu)

Copyright (c) 2000, 2023, Oracle and/or its affiliates.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

Uma vez dentro de sua aplicação, crie o banco de dados:

mysql> create database blog_db;

Declaração de Tabelas

A seguir, escreveremos as tabelas que serão utilizadas em nosso banco de dados.

Caso esteja usando o terminal, acesse seu banco de dados:

mysql> use blog_db;

Uma vez dentro do seu banco de dados, copie cada tabela abaixo e cole em seu terminal.

1 Usuário

create table user(
    id int primary key AUTO_INCREMENT,
    name varchar(250),
    password varchar(250),
    email varchar(50),
    role varchar(50),
    UNIQUE(email)
);

2 Artigos

create table articles(
    id int NOT NULL AUTO_INCREMENT,
    userId int NOT NULL,
    title varchar(250) NOT NULL,
    image varchar(250) DEFAULT NULL,
    content varchar(250) NOT NULL,
    primary key(id)
);

3 RefreshToken

create table refreshToken(
    id int primary key AUTO_INCREMENT,
    expiresIn int,
    userName varchar(250),
    userId int NOT NULL
);

O resultado final de nossas tabelas será:

mysql> show tables;
+-------------------------+
| Tables_in_blog_db |
+-------------------------+
| articles                |
| refreshToken            |
| user                    |
+-------------------------+
3 rows in set (0.00 sec)

Por fim, vamos criar um usuário teste com o seguinte comando dentro do banco de dados:

 mysql> insert into user(name, password, email, role) values ('admin','admin','admin@admin.com','admin');

Primeiros passos

Iniciando Aplicação

Vamos começar criando o package.json. No terminal de sua escolha:

npm init

Faça a configuração de seu npm init como entender.

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (test) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC)

Instalando dependências

Em seguida vamos instalar as bibliotecas.

npm i express multer mysql bcryptjs cors dotenv jsonwebtoken

Criando o servidor

Dentro da raiz do projeto, crie o arquivo server.js e adicione o seguinte código:

const express = require("express");
const cors = require("cors");
// connection to the server
const dbConnection = require("./connection");
const router = require("./routes/user");
// import routs
const user = require("./routes/user");
const article = require("./routes/article");

const app = express();

// middleware
app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.use("/uploads", express.static("uploads"));
app.use(express.json());
const upload = require("./middleware/upload");
// declare routs
app.use("/user", user);
app.use("/articles", article);

// calling server
const PORT = 8080;
app.listen(PORT, () => {
  {
    console.log(`server is running at port ${PORT} `);
  }
});

Pode ser que, neste momento, alguns dos arquivos ainda não tenham sido escritos, mas não se preocupe. Mais adiante, iremos criá-los.

Uma vez em que todos os módulos necessários forem instalados e a conexão com o banco de dados configurada corretamente antes de iniciar o servidor

caso queira fazer um teste, comente do código todas as rotas e conexão com banco dedados, deixando apenas o app.listen

Podemos escrever no terminal:

$ node server.js

E nosso servidor irá rodar na porta 8080.

Conexão ao Banco de Dados

Fazendo uso da biblioteca mysql, vamos escrever o código que conectará o nosso servidor ao banco de dados.
Lembre-se de substituir os valores pelos seus exatos para conectar ao banco de dados. Você pode registrá-los em seu arquivo .env para uma melhor proteção.

Crie um arquivo chamado connection.js com o seguinte conteúdo:

const mysql = require("mysql");
const dbConfig = {
  host: "localhost",
  user: "your db user",
  password: "your db password",
  database: "your db",
};
const dbConnection = mysql.createConnection(dbConfig);
module.exports = dbConnection;

Middleware

Dentro da pasta middleware, iremos escrever dois arquivos.

Autenticação

Dentro do arquivo middleware/auth.js, escreveremos o sistema responsável por validar a nossa chave de autenticação. Essa função será utilizada para proteger as rotas privadas de nossa aplicação, evitando que os dados de nosso banco de dados sejam acessados por usuários indevidos.

Primeiramente, dentro de nossa pasta raiz, vamos declarar um arquivo .env. Em seguida, dentro desse arquivo, vamos salvar a nossa chave de autenticação.

TOKEN_KEY = "ColoqueAquiOSeuToken"
TOKEN_REFRESH = "InsiraAquiSeuTokenDeVaLiDaçÃo"
TOKEN_LIFE="300" // tempo de vida do token
TOKEN_LIFE_REFRESH="400" // tempo de vida do token refresh

Você pode utilizar o próprio terminal para gerar o seu token. Primeiro, entre no node

$ node

Em seguida, utilizando da biblioteca crypto:

> require("crypto").randomBytes(64).toString('hex')

O resultado será uma linha composta de números e letras.

Caso queira saber mais sobre jwt, acesse sua documentação.

Agora vamos escrever nossa função verifyToken dentro do arquivo auth.js:

const jwt = require("jsonwebtoken");
const config = process.env;

const verifyToken = (req, res, next) => {
  const token =
    req.body.token || req.query.token || req.headers["x-access-token"];
  if (!token)
    return res.status(403).send("a token is required for authentication");
  try {
    const decoded = jwt.verify(token, config.TOKEN_KEY);
    req.user = decoded;
  } catch (err) {
    return res.status(401).send({ message: "ivalid token" });
  }
  return next();
};

module.exports = verifyToken;

Upload de arquivos

Nosso blog fará uso de imagens na publicação de nossos artigos, para isso, vamos criar um middleware capaz de lidar com o path das imagens e redirecioná-los para uma pasta específica de nossa aplicação: uploads/.

Faremos uso da biblioteca multer, para saber mais, acesse a sua documentação.

Crie um arquivo chamado uploads.js dentro da pasta middleware:

const multer = require("multer");
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "./uploads/");
  },
  filename: function (req, file, cb) {
    cb(null, new Date().toISOString() + file.originalname);
  },
});

const upload = multer({
  storage: storage,
  limits: {
    fileSize: 1024 * 1024 * 10,
  },
});

module.exports = upload;

Utilitários

Dentro de utils/, iremos escrever a função truncanteText. Seu uso é simples. A função recebe um texto e retorna dele uma parte pequena. Ela será usada para enviar um pequeno resumo do conteúdo do artigo como consulta de nossa API.

Crie um arquivo chamado truncanteText.js dentro da pasta utils com o seguinte conteúdo:

const trucanteText = (content, limit) => {
  const filteredContent = content.replace(/#{1,3}\s|```
{% endraw %}
/g, "");
  const words = filteredContent.split(" ");
  if (words.length > limit) {
    return words.slice(0, limit).join(" ") + "...";
  }
  return content;
};

module.exports = trucanteText;
{% raw %}

Rotas

Usuário(User)

Para escrever nossas rotas de usuário, utilizaremos as bibliotecas:

express - para a criação de nossas rotas.
jsonwebtoken - para a criação de nossa autenticação e sua chave de assinatura.
connection.js - o nosso módulo de conexão para realizar as nossas queries ao banco de dados.

Em routes/user.js:


js
require("dotenv").config();
const express = require("express");
const dbConnection = require("../connection");
const jwt = require("jsonwebtoken");

const router = express.Router();

Em seguida, escreveremos três rotas de usuário:

1 - /Signup - rota para o método de registro de novos usuários em nosso banco de dados.

Defina uma rota HTTP POST para /signup.


javascript
router.post("/signup", (req, res) => {
...
}

Obtemos os dados do novo usuário,"nome", "email" e "password", através do seu request.


javascript  
const user = req.body

Escrita da nossa consulta sql,



const query = "select email, name, password from user where email=?";

Consulta ao banco de dados, resultado final do código:


javascript
router.post("/signup", (req, res) => {
  const user = req.body;
  const query = "select email, name, password from user where email=?";
  dbConnection.query(query, [user.email], (err, result) => {
    if (!err) {
      if (result.length <= 0) {
        const query = "insert into user (name,email,password) values(?,?,?)";
        dbConnection.query(
          query,
          [user.name, user.email, user.password],
          (err, results) => {
            if (!err) {
              return res
                .status(200)
                .json({ message: "You are Successfully Registrated" });
            } else {
              return res.status(500).json(err);
            }
          },
        );
      } else {
        return res.status(400).json({ message: "Email already registrated!" });
      }
    }
    return res.status(500).json(err);
  });
});

2. /Login - vamos declarar a rota para a autenticação dos usuários em nossa aplicação.

Defina uma rota HTTP POST para /Login.


javascript
router.post("/login", (req, res) => {
...
}

Obtemos os dados do usuário, "email" e "password", através do seu request.


javascript  
const user = req.body

Escrita de nossa consulta sql,


javascript
const query = "select id, name, email, password from user where email=?";

Consulta ao banco de dados, tratamento do resultado da consulta, e geração de token:


javascript
router.post("/login", (req, res) => {
  const user = req.body;
  const query = "select id, name, email, password from user where email=?";
  dbConnection.query(query, [user.email], (err, result) => {
    if (!err) {
      if (result.length <= 0 || result[0].password != user.password) {
        return res
          .status(401)
          .json({ message: "wrong password, try it again" });
      } else if (result[0].password === user.password) {
        const response = {
          userId: result[0].id,
          name: result[0].name,
          email: result[0].email,
        };
        const accessToken = jwt.sign(response, process.env.TOKEN_KEY, {
          expiresIn: process.env.TOKEN_LIFE,
        });
        const refreshToken = jwt.sign(response, process.env.TOKEN_REFRESH, {
          expiresIn: process.env.TOKEN_LIFE_REFRESH,
        });

        res.status(200).json({
          token: accessToken,
          expiresIn: process.env.TOKEN_LIFE,
          tokenRefresh: refreshToken,
          name: result[0].name,
          email: result[0].email,
          id: result[0].id,
        });
      }
    } else {
      return res.status(500).json({ message: "something went wrong", err });
    }
  });
});

Se as credenciais estiverem corretas, gera dois tokens JWT: um para o acesso regular (accessToken) e outro para refresh (refreshToken). Os tokens contêm informações sobre o usuário, como id, nome e email. Os tokens são assinados usando chaves secretas definidas nas variáveis de ambiente.

3. /Refresh-Token - Rota para a ré-autenticação de nosso usuário na aplicação.

Defina uma rota HTTP POST para "/refresh-token".


javascript
router.post("/refresh-token",  (req, res) => {...}

Obtemos o token de atualização prévio do usuário através do request:


javascript
  const refreshToken = req.body.refreshToken;

Verificamos o nosso token de atualização


javascript
if (!refreshToken)
  return res.status(401).json({ message: "Refresh token missing" });

Renovamos os token de acesso:


javascript
const token = jwt.sign(response, process.env.TOKEN_KEY, {
  expiresIn: process.env.TOKEN_LIFE,
});

 const refreshToken = jwt.sign(response, process.env.TOKEN_REFRESH, {
    expiresIn: process.env.TOKEN_LIFE_REFRESH,
  });

Aqui está o resultado final:


javascript
router.post("/refresh-token", (req, res) => {
  const refreshToken = req.body.refreshToken;
  if (!refreshToken)
    return res.status(401).json({ message: "Refresh token missing" });

  jwt.verify(refreshToken, process.env.TOKEN_REFRESH, (err, decoded) => {
    if (!err) {
      const response = {
        userId: decoded.id,
        name: decoded.name,
        email: decoded.email,
      };
      const token = jwt.sign(response, process.env.TOKEN_KEY, {
        expiresIn: process.env.TOKEN_LIFE,
      });
      const refreshToken = jwt.sign(response, process.env.TOKEN_REFRESH, {
        expiresIn: process.env.TOKEN_LIFE_REFRESH,
      });

      res.status(200).json({
        id: decoded.id,
        name: decoded.name,
        email: decoded.email,
        token: token,
        expiresIn: process.env.TOKEN_LIFE,
        tokenRefresh: refreshToken,
      });
    } else {
      res.status(500).json(err);
    }
  });
})

Artigos(Articles)

Em routes/article.js, vamos começar chamando as bibliotecas:

express - para a criação de nossas rotas.
jsonwebtoken - para a criação de nossa autenticação e sua chave de assinatura.
connection.js - o nosso módulo de conexão para realizar as nossas queries ao banco de dados.
authentication.js - nosso middleware de autenticação para proteção das rotas privadas.
upload.js - nosso middleware para o upload de imagens.


javascript
const express = require("express");
const dbConnection = require("../connection");
const fs = require("fs");
const path = require("path");
//middleware
const upload = require("../middleware/upload");
const authentication = require("../middleware/auth");
// utils
const trucanteText = require("../utils/trucanteText");

const router = express.Router();
//routes...
module.exports = router;

Em seguida vamos escrever as rotas:

1.`/add` - Rota para adicionar novo artigo.

Definimos uma rota HTTP POST para "/add", passando o middleware authentication e o upload.single("thumb"), para o upload de uma única imagem:


javascript
router.post("/add", upload.single("thumb"), authentication, (req, res, next) => {
...
}

Coletamos os dados do corpo da solicitação (req.body) relacionados ao novo artigo, como userId, title, e content. Além disso, obtém o caminho da imagem carregada usando o middleware multer e o nome do campo especificado ("thumb").



...
const { userId, title, content } = req.body;
const image = req.file.path;

Escrita da consulta sql para inserir os dados do novo artigo dentro da tablea articles do banco de dados. Os valores inseridos são obtidos das variáveis userId, title, image, e content.


javascript
 const query ="insert into articles (userId, title, image, content) values(?,?,?,?)";

O resultado final do nosso código:


javascript
router.post(
  "/add",
  upload.single("thumb"),
  authentication,
  (req, res, next) => {
    const { userId, title, content } = req.body;

    const image = req.file.path;

    const query =
      "insert into articles (userId, title, image, content) values(?,?,?,?)";

    dbConnection.query(
      query,
      [userId, title, image, content],
      (err, result) => {
        if (!err) {
          return res.status(200).json({ message: "article has been added" });
        } else {
          return res.status(500).json(err);
        }
      },
    );
  },
);

2. `/delete/:id` - Para a remoção de artigos.

Defina uma rota HTTP DELETE para "/delete/:id". Esta rota será usada para remover um artigo do banco de dados. A autenticação é verificada antes de permitir a execução desta rota.


javascript
router.delete("/delete/:id", authentication, (req, res) => {
...
}

Obtém o parâmetro id da URL usando req.params. Este id é usado para identificar o artigo que será removido do banco de dados.


javascript
const id = req.params.id;

Escreva uma consulta sql para excluir um artigo da tabela "articles" do banco de dados com base no id fornecido.


javascript
const query = "delete from articles where id=?";

Aqui está o resultado final do nosso código:


javascript
router.delete("/delete/:id", authentication, (req, res) => {
  const id = req.params.id;
  const query = "delete from articles where id=?";
  dbConnection.query(query, [id], (err, result) => {
    if (!err) {
      if (result.affectedRows == 0) {
        return res.status(404).json({ message: "article id does not found" });
      } else {
        return res.status(200).json({ message: "article deleted" });
      }
    } else {
      return res.status(500).json(err);
    }
  });
});

3. `/edit/:id` - Rota para a edição de Artigos.

Defina uma rota HTTP PATCH para "/edit/:id". Esta rota será usada para atualizar um artigo no banco de dados. A autenticação é verificada antes de permitir a execução desta rota.


javascript
router.patch("/edit/:id", authentication, (req, res) => {...}

Coletamos o parâmetro id da URL e os dados do artigo do corpo da solicitação (req.body). O id é usado para identificar o artigo que será atualizado.


javascript
const id = req.params.id;
const article = req.body;

Escrita da consulta sql para atualizar um artigo na tabela "articles" do banco de dados com base no id fornecido.


javascript
const query = "update articles set title=?, content=? where id=?";

Aqui está o resultado final de nosso código:


javascript
router.patch("/edit/:id", authentication, (req, res) => {
  const id = req.params.id;
  const article = req.body;
  const query = "update articles set title=?, content=? where id=?";
  dbConnection.query(
    query,
    [article.title, article.content, id],
    (err, result) => {
      if (!err) {
        if (result.affectedRows == 0) {
          return res.status(404).json({ message: "article id does not found" });
        } else {
          return res
            .status(200)
            .json({ message: "article updated succesfullt" });
        }
      } else {
        return res.status(500).send({ message: "something went wrong" }, err);
      }
    },
  );
});

4. `/getAll` - Rota de consulta para todos os Artigos

Defina uma rota HTTP GET para "/getAll". Essa rota será usada para obter todos os artigos registrados no banco de dados.


javascript
router.get("/getAll", (req, res) => {}

Escreva uma consulta sql para selecionar todos os campos de todos os artigos na tabela "articles" do banco de dados.


javascript
const query = "SELECT * FROM articles";

Tratamento da consulta e resultado final:


javascript
router.get("/getAll", (req, res) => {
  const query = "SELECT * FROM articles";
  dbConnection.query(query, (err, results) => {
    if (err) {
      res.status(500).send({ message: "could not get articles" });
    } else {
      const processedResults = results.map((article) => {
        const { content, ...rest } = article;
        const resumedContent = trucanteText(content, 5);
        return { content: resumedContent, ...rest };
      });
      res.json(processedResults);
    }
  });
});

5. `/getById/:id` - Rota para obter um Artigo com base no ID.

Defina uma rota HTTP GET para "/getById/:id".


js
router.get("/getById/:id", (req, res) => {...}

Coletamos o parâmetro id da URL usando req.params.


js
const id = req.params.id;v

Escreva uma consulta sql para selecionar todos os campos do artigo na tabela "articles" do banco de dados onde o id corresponde ao id fornecido na URL.


javascript
const query = "SELECT * FROM articles WHERE id=?";

Aqui temos o resultado final do nosso código:


javascript
router.get("/getById/:id", (req, res) => {
  const id = req.params.id;
  const query = "SELECT * FROM articles WHERE id=?";
  dbConnection.query(query, [id], (err, results) => {
    if (err) {
      res.status(500).send({ message: "something whent wrong" }, err);
    } else if (results.length === 0) {
      res.status(404).send({ message: "article not found" });
    } else {
      res.json(results[0]);
    }
  });
});

Com todas essas rotas escritas vamos se capazes de consultar, registrar, editar e remover os dados de nossa aplicação.

Conclusão

Primeiramente, gostaria de agradecer por dedicar seu tempo a este tutorial, e parabéns por concluí-lo! Espero que tenha sido útil e fácil de seguir.

Sinta-se à vontade para explorar mais suas habilidades nesta aplicação. Algumas rotas foram deixadas de fora propositalmente para que você se sinta tentado a escrevê-las por si mesmo. Caso não tenha nada em mente, aqui estão algumas sugestões:

Rota para edição dos dados de um usuário
Rota para recuperação de senha de usuário via e-mail.
Rota para atualização de senha de usuário.
Rota para download de um artigo específico em formato markdown.

Este tutorial também abrange a parte frontend de nossa aplicação. Afinal, para que você quer uma API se não for usá-la em algum lugar, não é mesmo? Portanto, avance para a próxima etapa, acesse aqui e continue o nosso tutorial.

Além disso, não deixe de me seguir nas redes sociais.

twitter.com

Flat-co

Vitor Alecrim personal Website

flat-co.netlify.app

Até a próxima! o/

Construindo um Painel de Blog Dinâmico com Next.js

Vitor Alecrim — Fri, 01 Dec 2023 17:34:46 +0000

Apresentação

Neste guia, vamos criar o frontend de uma página de blog capaz de renderizar a escrita markdown. A aplicação incluirá rotas públicas e privadas, autenticação de usuário, e a capacidade de escrever texto em Markdown, com a adição de fotos, exibição de artigos e muito mais.

Sinta-se à vontade para personalizar a sua aplicação da maneira que preferir, até mesmo eu incentivo isso.

Você pode acessar o repositório dessa aplicação aqui:

Gondrak08 / blog-platform

A blog plataform made with Next.js/typescript.

Plataforma para blog

Tutorial em texto

Ingredientes

next-auth - biblioteca de autenticação para Next.js
github.com/markdown-it/markdown-it - markdown biblioteca.
github.com/sindresorhus/github-markdown-css- Para dar estilo ao nosso editor markdown.
github.com/remarkjs/react-markdown - Biblioteca para renderizar markdown em nosso componente react.
github.com/remarkjs/remark-react/tree/4722bdf - Plugin para transformar Markdown em React.
codemirror.net - Editor componente para web.
react-icons - lib de icones para react.

Como usar

npm i
npm run start

Server

você pode encontrar o servidor dessa aplicação em server

View on GitHub

Este tutorial também conta com a escrita do servidor Node.js que será usado nesse tutorial:

Espero que você se divirta.

Bom código.

Bibliotecas

Aqui está o resumo das bibliotecas usadas neste projeto.

next-auth - biblioteca de autenticação para Next.js
github.com/markdown-it/markdown-it - markdown biblioteca.
github.com/sindresorhus/github-markdown-css- Para dar estilo ao nosso editor markdown.
github.com/remarkjs/react-markdown - Biblioteca para renderizar markdown em nosso componente react.
github.com/remarkjs/remark-react/tree/4722bdf - Plugin para transformar Markdown em React.
codemirror.net - Editor componente para web.
react-icons - lib de icones para react.

Criando projeto React.

Vamos utilizar a versão mais recente do framework Next.js, que, no momento da redação deste tutorial, é a versão 13.4.

Execute o seguinte comando para criar o projeto:

npx create-next-app myblog

Durante a instalação, selecione as configurações do template. Neste tutorial,usarei TypeScript como linguagem e o framework de CSS, Tailwind CSS, para o estilo da nossa aplicação.

Configuração

Agora vamos instalar todas as bibliotecas que faremos uso.

Markdown

npm i  markdown-it @types/markdown-it markdown-it-style github-markdown-css react-markdown

React Remark

remark remark-gfm remark-react

Codemirror

npm @codemirror/commands @codemirror/highlight @codemirror/lang-javascript @codemirror/lang-markdown @codemirror/language @codemirror/language-data @codemirror/state @codemirror/theme-one-dark @codemirror/view

Icons

npm i react-icons @types/react-icons

Depois limpe a estrutura inicial da sua instalação, jogando fora tudo aquilo que não iremos usar.

Arquitetura

Assim é a estrutura final de nossa aplicação.

src-
  |- app/
  |    |-(pages)/
  |    |      |- (private)/
  |    |      |       |- (home)
  |    |      |       |- editArticle/[id]
  |    |      |       |
  |    |      |       |- newArticle
  |    |      | - (public)/
  |    |              | - article/[id]
  |    |              | - login
  |    |
  |   api/
  |    |- auth/[...nextAuth]/route.ts
  |    |- global.css
  |    |- layout.tsx
  |
  | - components/
  | - context/
  | - interfaces/
  | - lib/
  | - services/
middleware.ts

Primeiros passos

Configurando next.config

Na raiz do projeto, no arquivo next.config.js, vamos configurar o endereço do domínio de onde iremos acessar as imagens dos nossos artigos. Para este tutorial, ou se estiver usando um servidor local, utilizaremos localhost.

Certifique-se de incluir essa configuração para garantir o correto carregamento das imagens em sua aplicação.

const nextConfig = {
   images: {
    domains: ["localhost"],
  },
};

Configurando Middleware

Na pasta raíz da aplicação src/,crie um middleware.ts para verificar o acesso às rotas privadas.

export { default } from "next-auth/middleware";
export const config = {
  matcher: ["/", "/newArticle/", "/article/", "/article/:path*"],
};

Para saber mais sobre middlewares e tudo o que você pode fazer com ele, acesse a documentação

Configurando Rota de Autenticação.

Dentro da pasta /app, crie um arquivo chamado route.ts em api/auth/[...nextauth]. Ele conterá a configuração de nossas rotas, conectando-se à nossa API de autenticação usando o CredentialsProvider.

O CredentialsProvider permite que você lide com o login usando credenciais arbitrárias, como nome de usuário e senha, domínio ou autenticação de dois fatores ou dispositivo de hardware etc.

Primeiramente, na raiz do seu projeto, crie um arquivo .env.local e adicione um token que será usado como o nosso secret.

.env.local
NEXTAUTH_SECRET = SubsTituaPorToken

Em seguida, vamos escrever nosso sistema de autenticação, onde esse NEXTAUTH_SECRET será adicionado ao nosso secret no arquivo src/app/auth/[...nextauth]/routes.ts.

import NextAuth from "next-auth/next";
import type { AuthOptions } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import { authenticate } from "@/services/authService";
import refreshAccessToken from "@/services/refreshAccessToken";

export const authOptions: AuthOptions = {
  providers: [
    CredentialsProvider({
      name: "credentials",
      credentials: {
        email: {
          name: "email",
          label: "email",
          type: "email",
          placeholder: "Email",
        },
        password: {
          name: "password",
          label: "password",
          type: "password",
          placeholder: "Password",
        },
      },
      async authorize(credentials, req) {
        if (typeof credentials !== "undefined") {
          const res = await authenticate({
            email: credentials.email,
            password: credentials.password,
          });
          if (typeof res !== "undefined") {
            return { ...res };
          } else {
            return null;
          }
        } else {
          return null;
        }
      },
    }),
  ],

  session: { strategy: "jwt" },
  secret: process.env.NEXTAUTH_SECRET,
  callbacks: {
    async jwt({ token, user, account }: any) {
      if (user && account) {
        return {
          token: user?.token,
          accessTokenExpires: Date.now() + parseInt(user?.expiresIn, 10),
          refreshToken: user?.tokenRefresh,
        };
      }

      if (Date.now() < token.accessTokenExpires) {
        return token;
      } else {
        const refreshedToken = await refreshAccessToken(token.refreshToken);
        return {
          ...token,
          token: refreshedToken.token,
          refreshToken: refreshedToken.tokenRefresh,
          accessTokenExpires:
            Date.now() + parseInt(refreshedToken.expiresIn, 10),
        };
      }
    },
    async session({ session, token }) {
      session.user = token;
      return session;
    },
  },

  pages: {
    signIn: "/login",
    signOut: "/login",
  },
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

Provedor de Autenticação

Vamos criar um provedor de autenticação, um context, que irá compartilhar os dados do nosso usuário pelas páginas da nossa rota privada. Vamos utilizá-lo posteriormente para encapsular um de nossos layout.tsx.

Crie um arquivo em src/context/auth-provider.tsx com o seguinte conteúdo:

'use client';
import React from 'react';
import { SessionProvider } from "next-auth/react";
export default function Provider({
    children,
    session
}: {
    children: React.ReactNode,
    session: any
}): React.ReactNode {
    return (
        <SessionProvider session={session} >
            {children}
        </SessionProvider>
    )
};

Estilo Globais

No geral, em nossa aplicação, usaremos o Tailwind CSS para criar nosso estilo. No entanto, em alguns lugares, iremos compartilhar classes de CSS personalizadas entre páginas e componentes.

/*global.css*/
.container {
  max-width: 1100px;
  width: 100%;
  margin: 0px auto;
}

.image-container {
  position: relative;
  width: 100%;
  height: 5em;
  padding-top: 56.25%; /* Aspect ratio 16:9 (dividindo a altura pela largura) */
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 10px solid #f3f3f3;
  border-top: 10px solid #293d71;
  border-radius: 50%;
  animation: spinner 1.5s linear infinite;
}

Layouts

agora vamos escrever os layouts, privados e públcios.

app/layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Provider from "@/context/auth-provider";
import { getServerSession } from "next-auth";
import { authOptions } from "./api/auth/[...nextauth]/route";
const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Markdown Text Editor",
  description: "Created by <@vitorAlecrim>",
};

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await getServerSession(authOptions);
  return (
    <Provider session={session}>
      <html lang="en">
        <body className={inter.className}>{children}</body>
      </html>
    </Provider>
  );
}

pages/layout.tsx

import Navbar from "@/components/Navbar";
export default function PrivatePagesLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <header className="w-full  ">
        <Navbar />
      </header>
      <div className="container">{children}</div>
    </>
  );
}

Chamadas para a API

Nossa aplicação fará várias chamadas à nossa API, e você pode adaptar essa aplicação para usar qualquer API externa. No nosso exemplo, estamos utilizando a nossa aplicação local. Caso não tenha visto o tutorial do backend e a criação do servidor, acesse.

Em src/services/, vamos escrever as funções abaixo:

authService.ts: função responsável por autenticar nosso usuário no servidor.

export const authenticate = async ({
  email,
  password,
}: {
  email: string;
  password: string;
}) => {
  const response = await fetch(`http://localhost:8080/user/login`, {
    method: "POST",
    headers: {
      "content-type": "application/json",
    },
    body: JSON.stringify({
      email: email,
      password: password,
    }),
  });
  const user = await response.json();

  if (!response.ok) {
    throw new Error(user.message);
  }
  if (user) {
    return user;
  }

  return null;
};

2.refreshAccessToken.tsx:

export default async function refreshAccessToken(refreshToken: string) {
  const headers = {
    "Content-Type": "application/json",
  };

  const data = {
    refreshToken: refreshToken,
  };

  try {
    const res = await fetch("http://localhost:8080/user/refresh-token", {
      method: "POST",
      headers: headers,
      body: JSON.stringify(data),
    });

    console.log("new call token -->", res);
    const token = await res.json();
    return token;
  } catch (error) {
    console.error("error refreshing token", error);
    throw error;
  }
}

getArticles.tsx: função responsável por chamar todos os artigos salvos em nosso banco de dados:

export default async function getArticals() {
  try {
    const res = await fetch("http://localhost:8080/articles/getAll", {
      cache: "no-cache",
    });
    const data = await res.json();
    return data;
  } catch (error) {
    console.log("something wrong just happend", error);
  }
}

postArtcile.tsx: função responsável por registrar os dados do artigo em nosso servidor.

import { IProp } from "@/interfaces/services.interface";

export default async function postArtical(prop:IProp){
    const {token,title, doc,imageUrl} = prop;
    const formData = new FormData();
    formData.append('title',title);
    formData.append('thumb', imageUrl);
    formData.append('content', doc);

    const headers = {
        'x-access-token': token
    };

    try{
        const res = await fetch('http://localhost:8080/articles/add',{
            method:'POST',
            headers:headers,
            body:formData
        })
        const result = await res.json();
        return result;
    } catch(error){
        console.log('Error:', error);
        console.log('something wrong just happend', await error);
    }
}

editArticle.tsx: função responsável por modificar um artigo específico dentro do banco de dados.

import { IProp } from "@/interfaces/services.interface";
export default async function editArtical(prop: IProp) {
  const { id, token, imageUrl, title, doc } = prop;
  const formData = new FormData();
  formData.append("title", title);
  formData.append("thumb", imageUrl);
  formData.append("content", doc);

  const headers = {
    "x-access-token": token,
  };

  try {
    const res = await fetch(`http://localhost:8080/articles/edit/${id}`, {
      method: "PATCH",
      headers: headers,
      body: formData,
    });
    const result = await res.json();
    return result;
  } catch (error) {
    console.log("Error:", error);
    console.log("something wrong just happend", await error);
    throw error;
  }
}

deleteArticle.tsx: função responsável por remover um artigo específico de nosso banco de dados:

interface IProp {
  id: number;
  token: string;
}

export default async function deleteArtical(prop: IProp) {
  const { id, token } = prop;

  const headers = {
    "x-access-token": token,
  };

  try {
    const res = await fetch(`http://localhost:8080/articles/delete/${id}`, {
      method: "DELETE",
      headers: headers,
    });
    const result = await res.json();
    return result;
  } catch (error) {
    console.log("Error:", error);
    console.log("something wrong just happend", await error);
  }
}

Componentes

A seguir, vamos escrever cada componente usado durante a aplicação.

Components/Navbar.tsx

Um componente simples com dois links de navegação.

import { TfiWrite } from "react-icons/tfi";
import { BsNewspaper } from "react-icons/bs";
import Link from "next/link";
import SignOutButton from "./SignOutButton";
export default function Navbar() {
  const linkStyle = "flex items-center  gap-2 hover:text-slate-600";
  return (
    <section className="container h-fit px-24 py-5">
      <div className="flex items-center justify-between  px-6">
        <div className="flex iems-center gap-8">
          <Link href="/" className={linkStyle}>
            <BsNewspaper className="w-[3em] h-[3em] font-light" />
          </Link>
          <Link href="/newArticle" className={linkStyle}>
            <TfiWrite className="text-sm w-[2.5em] h-[2.5em]" />
            <span className="text-[14px]">Escreva</span>
          </Link>
        </div>
        <SignOutButton />
      </div>
    </section>
  );
}

Components/ Loading.tsx

Um componente simples de loading, usado durante a espera das chamadas de API.

export default function Loading() {
  return (
    <div className="loading-container w-full h-fit flex items-center justify-center">
      <div className="spinner-container">
        <div className="loading-spinner"></div>
      </div>
    </div>
  );
}

Components/ Pagination.tsx

Um componente de paginação usado em nossa página de exibição de todos os nossos artigos, em nossa rota privada. Você pode encontrar um artigo mais detalhado sobre a escrita deste componenteaqui

import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';

interface IPagination {
  currentPage: number;
  totalPages: number;
  onPageChange: (pageNumber: number) => void;
}

export default function Pagination(props: IPagination) {
  const { currentPage, totalPages, onPageChange } = props;

  const handlePrevClick = () => {
    if (currentPage > 0) {
      onPageChange(currentPage - 1);
    }
  };

  const handleNextClick = () => {
    if (currentPage < totalPages - 1) {
      onPageChange(currentPage + 1);
    }
  };

  const getPageNumbers = () => {
    const visiblePageCount = 4;
    const pageNumbers: number[] = [];

    if (totalPages <= visiblePageCount) {
      pageNumbers.push(...Array.from({ length: totalPages }, (_, i) => i + 1));
    } else {
      const firstPage = 0;
      const lastPage = totalPages - 1;

      const midPageCount = visiblePageCount - 2;

      const step = Math.floor(midPageCount / 2);
      pageNumbers.push(firstPage);

      if (currentPage < firstPage + step) {
        pageNumbers.push(...Array.from({ length: Math.min(midPageCount, totalPages) }, (_, i) => firstPage + i + 1));
      } else if (currentPage > lastPage - step) {
        pageNumbers.push(...Array.from({ length: Math.min(midPageCount, totalPages) }, (_, i) => lastPage - midPageCount + i));
      } else {
        const start = currentPage - step;
        pageNumbers.push(...Array.from({ length: midPageCount }, (_, i) => start + i + 1));
      }

      pageNumbers.push(lastPage + 1);
    }

    return pageNumbers;
  };

  const pageNumbers = getPageNumbers();

  return (
    <nav className="flex mx-auto w-fit">
      <ul id="pagination" className="flex items-center font-epilogue font-[500] text-[14px] border border-mv-gray-300 rounded-xl">
        <li className="border-r-[1px] border-r-mv-gray-300">
          <button
            className={`page-item text-sm md:text-md p-2 rounded-md flex items-center gap-3
              ${currentPage === 0 ? 'disable cursor-not-allowed text-mv-blue-200' : 'text-mv-blue-600'}`}
            onClick={handlePrevClick}
            disabled={currentPage === 0}
          >
            <FaArrowLeft className="text-mv-blue-200" />
            Anterior
          </button>
        </li>

        <div className="flex h-full w-full items-center justify-center">
          {pageNumbers.map((pageNumber) => (
            <li
              key={pageNumber - 1} 
              className={`page-item flex items-center w-full h-full border-r-[1px] border-r-mv-gray-300 last:border-r-0
                            ${pageNumber === currentPage + 1 ? 'active text-mv-blue-600' : 'text-mv-blue-200'}`}
            >
              <button className="page-link w-full h-full px-4" onClick={() => onPageChange(pageNumber - 1)}>
                {pageNumber}
              </button>
            </li>
          ))}
        </div>

        <li className="border-l-[1px] border-r-mv-gray-300">
          <button
            className={`page-item text-sm md:text-md p-2 rounded-md flex items-center gap-3 font- ${currentPage === totalPages - 1 ? 'disable cursor-not-allowed text-mv-blue-200' : '  text-mv-blue-600'
              }`}
            onClick={handleNextClick}
            disabled={currentPage === totalPages - 1}
          >
            Próxima
            <FaArrowRight className="text-mv-blue-200" />
          </button>
        </li>
      </ul>
    </nav>
  );
}

Components/ SignOutButton

Componente botão para retirada de usuário da aplicação.

"use client";
import React from "react";
import { signOut } from "next-auth/react";
import { BiExit } from "react-icons/bi";

const SignOutButton = () => {
  return (
    <div className="h-fit w-fit flex items-center gap-1">
      sair
      <BiExit
        className="text-slate-500 hover:text-slate-600 w-7 h-7 cursor-pointer"
        onClick={() => {
          signOut({ redirect: true, callbackUrl: "/login" });
        }}
      />
    </div>
  );
};

export default SignOutButton;

Components/ ArticleCard.tsx

Cartão de exibição dos artigos escritos.
Este componente também contém um link que levará tanto à página de exibição do artigo quanto à página de edição de um artigo previamente escrito.

import Image from "next/image";
import MarkdownIt from "markdown-it";
import Link from "next/link";
import { AiOutlineEdit } from "react-icons/ai";

export interface IArticleCard {
  id: number;
  title: string;
  description: string | null;
  image: string;
  link: string;
}

export default function ArticleCard({
  id,
  title,
  description,
  image,
}: IArticleCard) {
  const md = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: true,
  });
  const mdTitle = md.render(title);
  const mdDescription = description && md.render(description);
  return (
    <div id="article-card" className="w-full h-full relative ">
      <Link
        href={`editArticle/${id}`}
        className="w-fit h-fit absolute z-30 top-3 right-3"
      >
        <AiOutlineEdit className="w-8 h-8  text-white hover:text-yellow-200" />
      </Link>

      <Link
        href={`article/${id}`}
        rel="noopener noreferrer"
        className="flex flex-col gap-2 w-full h-full shadow-xl hover:shadow-2xl z-10"
      >
        <div className="image-container relative">
          <Image
            src={image}
            alt={title}
            className="absolute object-contain w-full h-full"
            fill
          />
        </div>
        <div className="p-2 h-full relative">
          <div
            className="text-sm md:text-[15px]"
            dangerouslySetInnerHTML={{ __html: mdTitle }}
          />
          {mdDescription && (
            <div dangerouslySetInnerHTML={{ __html: mdDescription }} />
          )}
        </div>
      </Link>
        </div>
  );
}

Components/ PreviewText.tsx

Componente responsável por exibir o texto que estamos escrevendo em nosso editor Ele faz uso de uma biblioteca diferente da article. Caso queira, você pode adaptar o componente para usar a mesma biblioteca.

import React from "react";
import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkGfm from "remark-gfm";
import remarkReact from "remark-react";
import Image from "next/image";
interface Props {
  doc: string;
  title: string;
  previewImage: string;
  onPreview: () => void;
}
const Preview: React.FC<Props> = (props) => {
  const md: any = unified()
    .use(remarkParse)
    .use(remarkGfm)
    .use(remarkReact as any, React)
    .processSync(props.doc).result;

  return (
    <section className='h-[50em] w-full flex flex-col gap-5'>
      <div className='w-full'>
        <button onClick={() => props.onPreview()}>X</button>
      </div>
      {props.previewImage.length > 0 && (
        <div className='w-full h-[10em] relative'>
          <Image
            alt='prev-image'
            layout='fill'
            className='w-[10em] h-[10em] object-cover bg-center bg-no-repeat absolute'
            src={props.previewImage}
          />
        </div>
      )}
      <div className='w-full h-full'>
        <div className=''>
          <h1 className='text-black text-2xl'>{props.title}</h1>
        </div>
        <div className='preview markdown-body text-black h-full'>
          Preview {md}{" "}
        </div>
      </div>
    </section>
  );
};
export default Preview;

Components/ ArticleList.tsx

Componente responsável por executar chamadas de api e a exibição do retorno de sua resposta.
Aqui faremos uso de duas chamadas de api através das funções que escrevemos:

getArticles.ts - nos retorna todos os artigos que serão exibidos no componente.
removeArticle - remove um artigo específico de nossa lista e do nosso servidor.

Faremos uso do componente Pagination.tsx, escrito previamente para dividir o número de nossos artigos em páginas.

"use client";
import { useState, useEffect } from "react";
import { useSession } from "next-auth/react";
import { redirect } from "next/navigation";
import getArticals from "@/services/getArticles";
import { IArticle } from "@/interfaces/article.interface";
import ArticleCard from "./articleCard";
import Pagination from "./Pagination";
import Loading from "./Loading";
import {MdOutlineAutoDelete} from 'react-icons/md'
import deleteArtical from "@/services/deleteArticle";

const ArticleList = () => {
  const linkStyle = "flex items-center  gap-2 hover:text-slate-600";
  const { data: session }: any = useSession({
    required: true,
    onUnauthenticated() {
      redirect("/login");
    },
  });

  const [articles, setArticles] = useState<IArticle[]>([]);
  const [currentPage, setCurrentPage] = useState<number>(0);
  const handlePageChange = (pageNumber: number) => {
    setCurrentPage(pageNumber);
  };
  const itemsPerPage: number = 10;
  const paginatedItems: any[] = [];

  for (let i = 0; i < articles.length; i += itemsPerPage) {
    paginatedItems.push(articles.slice(i, i + itemsPerPage));
  }

  const articlesToDisplay = paginatedItems[currentPage]?.slice(0, 8);

 async function removeArticle(id: number) {
    const token: string = session?.user?.token;
    const deleteArr = await deleteArtical({ id, token });
    console.log(deleteArr?.ok);
    if(deleteArr?.ok){
      const filter = articles.filter((article: IArticle, index: number) =>
      article.id !== id ? id : null,
      );
     setArticles(filter);
    }
  }

  useEffect(() => {
    const getData = async () => {
      const data = await getArticals();
      setArticles(data.reverse());
    };
    getData();
  }, [articles]);

  if (articles.length === 0) return <Loading />;

  return (
    <section
      className="
      w-full h-full px-5"
    >
      <h1 className="text-2xl text-slate-800 text-bold my-3">Seus textos</h1>
      <div className="w-full border border-slate-300 my-3"/>
      <div className="h-full grid md:grid-cols-2 lg:grid-cols-3  xl:grid-cols-4 md:gap-2 xl:gap-3 ">
        {Array.isArray(articlesToDisplay) &&
          articlesToDisplay.map((article: IArticle, index: number) => {
            return (
              <div key={index} className="relative w-full h-full">
                <ArticleCard
                  id={article.id}
                  image={`http://localhost:8080/` + article.image}
                  description={article.content}
                  title={article.title}
                  key={index}
                  link={"#"}
                />{" "}
                <div
                  onClick={() => removeArticle(article.id)}
                  className="absolute right-2 bottom-2 z-30 w-fit h-fit"
                >
                 <MdOutlineAutoDelete className="w-5 h-5 hover:text-red-500" />
                </div>
              </div>
            );
          })}
      </div>

      <div className="w-full py-5  border border-transparent border-t-mv-gray-200">
        <Pagination
          currentPage={currentPage}
          totalPages={paginatedItems.length}
          onPageChange={handlePageChange}
        />
      </div>
    </section>
  );
};
export default ArticleList;

Components/ TextEditor.tsx

Para a criação do nosso editor de texto faremos uso da biblioteca codemirror.
A biblioteca fará com que o editor possa processar a escrita markdown.

Começamos importando a biblioteca e em seguida escrevemos o componente.

"use client";
import { useCallback, useEffect } from "react";
import useCodeMirror from "@/lib/use-codemirror";

interface Props {
  initialDock: string;
  onChange: (doc: string) => void;
}

const TextEditor: React.FC<Props> = (props) => {
  const { onChange, initialDock } = props;
  const handleChange = useCallback(
    (state: any) => onChange(state.doc.toString()),
    [onChange],
  );
  const [refContainer, editorView] = useCodeMirror<HTMLDivElement>({
    initialDoc: initialDock,
    onChange: handleChange,
  });
  useEffect(() => {
    if (editorView) {
      console.log(editorView);
    }
  }, [editorView]);

  return (
    <section className="h-full w-full">
      <div
        className="editor-wrapper  h-full w-full mx-auto flex flex-col gap-2"
        ref={refContainer}
      />
    </section>
  );
};

export default TextEditor;

Páginas

A seguir, passaremos por cada uma de nossas páginas, divididas por suas respectivas rotas.

Públicas

Login

Esta é a página inicial de nossa aplicação. Trata-se de uma página simples; você pode modificá-la conforme entender. Nela, faremos uso da função signin provida pela biblioteca de navegação next-auth.

No arquivo src/app/pages/public/login/page.tsx.

"use client";
import { ChangeEvent, FormEvent, useState } from "react";
import { signIn } from "next-auth/react";

export default function Page() {
  const inputStyle =
    "p-2 border border-1 border-slate-300 rounded-md text-black";

  const [formValues, setFormValues] = useState<{
    email: string;
    password: string;
  }>({
    email: "",
    password: "",
  });

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value }: { name: string; value: string } = e.target;
    setFormValues({ ...formValues, [name]: value });
  };

  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const res = await signIn("credentials", {
      email: formValues.email,
      password: formValues.password,
      redirect: true,
      callbackUrl: `${window.location.origin}/`,
    });
    console.log("res--->", res);
  };

  return (
    <main className="flex flex-col  min-h-screen w-full  px-24">
      <section className="container mx-auto min-h-screen h-full flex items-center justify-center">
        <div className=" bg-white h-[20em] rounded-md p-3 drop-shadow-md ">
          <div className="flex flex-col gap-2 items-center py-5">
            <h1 className="text-blue-500 text-5xl">W</h1>
            <span className="text-slate-400">Entrar em seu blog</span>
          </div>
          <form
            onSubmit={(e: any) => {
              onSubmit(e);
            }}
            className="w-full flex flex-col gap-2"
          >
            <input
              onChange={(e: any) => handleChange(e)}
              name="email"
              type="email"
              placeholder="Email"
              value={formValues.email}
              className={inputStyle}
            />
            <input
              onChange={(e: any) => handleChange(e)}
              name="password"
              type="password"
              placeholder="Password"
              value={formValues.password}
              className={inputStyle}
            />
            <button className="mt-2 border border-slate-400 hover:bg-blue-500 text-blue-500 hover:text-white w-fit p-2 self-start rounded-md   text-[14px] font-openSans ">
              Entrar
            </button>
          </form>
        </div>
      </section>
    </main>
  );
}

Página de Artigo

Para criar a página de leitura de artigos, vamos desenvolver uma página dinâmica.

Toda plataforma de blog que você já acessou provavelmente possui uma página dedicada à leitura de artigos, acessível via URL. A razão para isso é uma rota de página dinâmica. Felizmente, o Next.js facilita isso com seu novo método AppRouter, tornando nossa vida muito mais fácil.

Primeiro: precisamos criar a rota em nossa estrutura, adicionando uma pasta [id]. Isso resultará na seguinte estrutura, pages/(public)/articles/[id]/pages.tsx.

O id corresponde ao slug da nossa rota de navegação.
params é uma propriedade passada através da arvore de nossa aplicação contendo o slug de navegação.

export default function Page({ params }: { params: any }) {
  const id: number = params.id;
...

Segundo: uso da biblioteca MarkdownIt, para que a página exiba o texto em formato markdown.

import MarkdownIt from "markdown-it";
import "github-markdown-css/github-markdown.css";

E por fim,
uma vez a página pronta, ao acessar, por exemplo, localhost:3000/articles/1 no navegador, você terá acesso ao artigo com o ID fornecido.

No nosso caso, o id será passado através da navegação quando clicarmos em um dos componentes ArticleCards.tsx, que serão renderizados na página principal da nossa rota privada.

"use client";
import { useState, useEffect } from "react";
import { IArticle } from "@/interfaces/article.interface";
import Image from "next/image";

import MarkdownIt from "markdown-it";
import "github-markdown-css/github-markdown.css";

export default function Page({ params }: { params: any }) {
  const id: number = params.id;
  const [article, setArticle] = useState<IArticle | null>(null);

  const fetchArticle = async (id: number) => {
    try {
      const response = await fetch(
        `http://localhost:8080/articles/getById/${id}`,
      );
      const jsonData = await response.json();
      setArticle(jsonData);
    } catch (err) {
      console.log("something went wrong:", err);
    }
  };

  useEffect(() => {
    if (article !== null || article !== undefined) {
      fetchArticle(id);
    }
  }, [id, article]);

  if (article === null) return null;

  const md = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: true,
  });

  const mdTitle: string = md.render(article.title);
  const mdContent: string = md.render(article.content);

  return (
    <section className="min-h-screen">
      <section className="w-full container mx-auto">
        <div className="container h-[20em] relative ">
          <Image
            src={`http://localhost:8080/` + article?.image}
            alt="hero image"
            fill={true}
            className="w-full h-full z-1 object-cover bg-center bg-no-repeat"
          />
        </div>
        <>
          <div className="markdown-body p-5">
            <div
              className="text-4xl"
              dangerouslySetInnerHTML={{ __html: mdTitle }}
            />
            <div dangerouslySetInnerHTML={{ __html: mdContent }} />
          </div>
        </>
      </section>
    </section>
  );
}

Privadas

Aqui estão nossas páginas privadas que poderão apenas ser acessadas uma vez que o usuário está autenticado em nossa aplicação.

Home

Dentro da nossa pasta app/pages/ quando algum arquivo é declarado dentro de (), significa que aquela rota é /.

No nosso caso, a pasta (Home), refere-se a página inicial de nossa rota privada. Ela é a primeira página que o usuário ver ao se autenticar no sistema. Essa página irá exibir a lista de artigos de nosso banco de dados.

Os dados serão processados pelo nosso componente ArticlesList.tsx. Se você ainda não escreveu esse código, volte à seção de componentes.

Em app/(pages)/(private)/(home)/page.tsx

import ArticleList from "@/components/ArticlesList";
export default function Home() {
  return (
    <main className="flex flex-col  min-h-screen w-full  px-24">
      <section className="w-full h-full min-h-[92vh]">
        <ArticleList />
      </section>
    </main>
  );
}

Novo Artigo

Essa é uma das páginas mais importantes de nossa aplicação, através delavamos poder registrar os nossos artigos.
Essa página permitirá o usuário.

Escrever um artigo em formato markdown.
Atribuir uma imagem ao artigo.
Acesso a prévia do texto em markdown antes de envia-lo ao servidor.

A página faz uso de alguns hooks:

useCallBack - utilizado para memorizar funções.
useState - permite você adicionar uma state variavel ao nosso componente.
useSession - nos permite saber se o usuário está autenticado, e nos permite obter o token de autenticação.

Para isso iremos usar dois componentes:

TextEditor.tsx: editor de texto que escrevemos previamente.
Preview.tsx: componente de exibição de arquivo em formato markdown.

Durante a construção desta página faremos uso da nossa API.

POST: utilizando a nossa função,postArtical, vamos enviar o artigo ao servidor.

Também faremos uso do hook useSession, provido pela biblioteca next-auth, para obtermos o token de autenticação de usuário que será utilizado para realizarmos o registro do artigo no servidor.

três chamadas distintas de API.
Em app/pages/(private)/newArticle/page.tsx

"use client";
import React, { ChangeEvent, useCallback, useState } from "react";
import { useSession } from "next-auth/react";
import { redirect } from "next/navigation";
import postArtical from "@/services/postArticle";
import { AiOutlineFolderOpen } from "react-icons/ai";
import { RiImageEditLine } from "react-icons/ri";

import Image from "next/image";
import TextEditor from "@/components/textEditor";
import Preview from "@/components/PreviewText";
import { AiOutlineSend } from "react-icons/ai";
import { BsBodyText } from "react-icons/bs";

export default function NewArticle(params:any) {
  const { data: session }: any = useSession({
    required: true,
    onUnauthenticated() {
      redirect("/login");
    },
  });
  const [imageUrl, setImageUrl] = useState<object>({});
  const [previewImage, setPreviewImage] = useState<string>("");
  const [previewText, setPreviewText] = useState<boolean>(false);
  const [title, setTitle] = useState<string>("");
  const [doc, setDoc] = useState<string>("# Escreva o seu texto... \n");
  const handleDocChange = useCallback((newDoc: any) => {
    setDoc(newDoc);
  }, []);

  if (!session?.user) return null;

  const handleArticleSubmit = async (e:any) => {
        e.preventDefault();
    const token: string = session.user.token;
    try {
      const res = await postArtical({
        id: session.user.userId.toString(),
        token: token,
        imageUrl: imageUrl,
        title: "title,"
        doc: doc,
      });
      console.log('re--->', res);
      redirect('/success');
    } catch (error) {
      console.error('Error submitting article:', error);
      // Handle error if needed
      throw error;
    }
  };

  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      const file = e.target.files[0];
      const url = URL.createObjectURL(file);
      setPreviewImage(url);
      setImageUrl(file);
    }
  };

  const handleTextPreview = (e: any) => {
    e.preventDefault();
    setPreviewText(!previewText);
  };
  return (
    <section className="w-full h-full min-h-screen relative py-8">
      {previewText && (
        <div className="absolute right-16 top-5 p-5 border-2 border-slate-500 bg-slate-100 rounded-xl w-full max-w-[33em] z-30">
          <Preview
            doc={doc}
            title={title}
            previewImage={previewImage}
            onPreview={() => setPreviewText(!previewText)}
          />
        </div>
      )}

      <form className="relative mx-auto max-w-[700px] h-full min-h-[90%] w-full p-2 border-2 border-slate-200 rounded-md  bg-slate-50 drop-shadow-xl flex flex-col gap-2 ">
        {" "}
        <div className="flex justify-between items-center">
          <button
            className="border-b-2 rounded-md border-slate-500 p-2 flex items-center gap-2  hover:border-slate-400 hover:text-slate-800"
            onClick={handleTextPreview}
          >
            <BsBodyText />
            Preview
          </button>{" "}
          <button
            className="group border border-b-2 border-slate-500 rounded-md p-2 flex items-center gap-2 hover:border-slate-400 hover:text-slate-800 "
            onClick={handleArticleSubmit}
          >
            Enviar Texto
            <AiOutlineSend className="w-5 h-5 group-hover:text-red-500" />
          </button>
        </div>
        <div className="header-wrapper flex flex-col gap-2 ">
          <div className="image-box">
            {previewImage.length === 0 && (
              <div className="select-image">
                <label
                  htmlFor="image"
                  className="p-4 border-dashed border-4 border-slate-400 cursor-pointer flex flex-col items-center justify-center"
                >
                  <AiOutlineFolderOpen className="w-7 h-7" />
                  drang and drop image
                </label>
                <input
                  id="image"
                  name="thumb"
                  type="file"
                  multiple
                  className="w-full h-5"
                  style={{ display: "none" }}
                  onChange={handleImageChange}
                />
              </div>
            )}
            {previewImage.length > 0 && (
              <div className="w-full h-[10em] relative">
                <div className="absolute top-0 left-0 w-full h-full cursor-pointer transition-opacity bg-transparent hover:bg-[#00000036] z-30" />
                <RiImageEditLine className="w-[3em] h-[3em] absolute right-1 z-30 text-slate-300 " />
                <Image
                  alt="prev-image"
                  layout="fill"
                  className="w-[10em] h-[10em] object-cover bg-center bg-no-repeat "
                  src={previewImage}
                />
              </div>
            )}
          </div>

          <div className="flex justify-between w-full">
            <input
              name="title"
              type="text"
              placeholder="Título"
              onChange={(e: ChangeEvent<HTMLInputElement>) =>
                setTitle(e.target.value)
              }
              className="border-x-2 border-b w-full p-2"
            />
          </div>
        </div>
        <TextEditor initialDock={doc} onChange={handleDocChange} />
      </form>
    </section>
  );
}

Edição de Artigo.

Página similar a de Novo Artigo(newArticle), com algumas diferenças.

Primeiro nós definimos uma ronta dinâmica, onde recebemos uma id como parâmetro de navegação. Muito similar ao que se fez na página de leitura de artigo.
app/(pages)/(private)/editArticle/[id]/page.tsx

"use client";
import React, { useState, useEffect, useCallback, useRef, ChangeEvent } from "react";
import { useSession } from "next-auth/react";
import { redirect } from "next/navigation";
import Image from 'next/image';

import { IArticle } from "@/interfaces/article.interface";
import { AiOutlineEdit } from "react-icons/ai";
import { BsBodyText } from "react-icons/bs";
import { AiOutlineFolderOpen } from "react-icons/ai";
import { RiImageEditLine } from "react-icons/ri";

import Preview from "@/components/PreviewText";
import TextEditor from "@/components/textEditor";
import Loading from '@/components/Loading';
import editArtical from "@/services/editArticle";

export default function EditArticle({ params }: { params: any }) {
 const { data: session }: any = useSession({
    required: true,
    onUnauthenticated() {
      redirect("/login");
    },
  });
  const id: number = params.id;
  const [article, setArticle] = useState<IArticle | null>(null);
  const [imageUrl, setImageUrl] = useState<object>({});
  const [previewImage, setPreviewImage] = useState<string>("");
  const [previewText, setPreviewText] = useState<boolean>(false)
  const [title, setTitle] = useState<string>("");
  const [doc, setDoc] = useState<string>('');
  const handleDocChange = useCallback((newDoc: any) => {
    setDoc(newDoc);
  }, []);
  const inputRef= useRef<HTMLInputElement>(null);

  const fetchArticle = async (id: number) => {
    try {
      const response = await fetch(
        `http://localhost:8080/articles/getById/${id}`,
      );
      const jsonData = await response.json();
      setArticle(jsonData);
    } catch (err) {
      console.log("something went wrong:", err);
    }
  };
  useEffect(() => {
    if (article !== null || article !== undefined) {
      fetchArticle(id);
    }
  }, [id]);

  useEffect(()=>{
    if(article != null && article.content){
        setDoc(article.content)
    }

    if(article !=null && article.image){
      setPreviewImage(`http://localhost:8080/` + article.image)
    }
  },[article])

  const handleArticleSubmit = async (e:any) => {
     e.preventDefault();
    const token: string = session.user.token;
    try{
      const res = await editArtical({
      id: id,
      token: token,
      imageUrl:imageUrl,
      title: title,
      doc: doc,
      });
        console.log('re--->',res)
        return res;
    } catch(error){
    console.log("Error:", error)
    }
  };
  const handleImageClick = ()=>{
      console.log('hiii')
    if(inputRef.current){
      inputRef.current.click();
    }
  }
  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      const file = e.target.files[0];
      const url = URL.createObjectURL(file);
      setPreviewImage(url);
      setImageUrl(file);
    }

  };
   const handleTextPreview = (e: any) => {
    e.preventDefault();
    setPreviewText(!previewText);
    console.log('hello from preview!')
  };

  if(!article) return <Loading/>
  if(article?.content)
  return (
    <section className='w-full h-full min-h-screen relative py-8'>
      {previewText && (
        <div className="absolute right-16 top-5 p-5 border-2 border-slate-500 bg-slate-100 rounded-xl w-full max-w-[33em] z-30">
          <Preview
            doc={doc}
            title={title}
            previewImage={previewImage}
            onPreview={() => setPreviewText(!previewText)}
          />
        </div>
      )}

      <div className='relative mx-auto max-w-[700px] h-full min-h-[90%] w-full p-2 border-2 border-slate-200 rounded-md  bg-white drop-shadow-md flex flex-col gap-2'>
        <form className='relative mx-auto max-w-[700px] h-full min-h-[90%] w-full p-2 border-2 border-slate-200 rounded-md  bg-slate-50 drop-shadow-md flex flex-col gap-2 '>
          {" "}
          <div className='flex justify-between items-center'>
            <button
              className='border-b-2 rounded-md border-slate-500 p-2 flex items-center gap-2  hover:border-slate-400 hover:text-slate-800'
              onClick={handleTextPreview}
            >
              <BsBodyText />
              Preview
            </button>{" "}
            <button
              className='group border border-b-2 border-slate-500 rounded-md p-2 flex items-center gap-2 hover:border-slate-400 hover:text-slate-800 '
              onClick={handleArticleSubmit}
            >
                Edite artigo 
              <AiOutlineEdit className='w-5 h-5 group-hover:text-red-500' />
            </button>
          </div>
          <div className='header-wrapper flex flex-col gap-2 '>
            <div className='image-box'>
              {previewImage.length === 0 && (
                <div className='select-image'>
                  <label
                    htmlFor='image'
                    className='p-4 border-dashed border-4 border-slate-400 cursor-pointer flex flex-col items-center justify-center'
                  >
                    <AiOutlineFolderOpen className='w-7 h-7' />
                    drang and drop image
                  </label>
                  <input
                    id='image'
                    name='thumb'
                    type='file'
                    multiple
                    className='w-full h-5'
                    style={{ display: "none" }}
                    onChange={handleImageChange}
                  />
                </div>
              )}
              {previewImage.length > 0 && (
                <div className='w-full h-[10em] relative'>
                  <div className='absolute top-0 left-0 w-full h-full cursor-pointer transition-opacity bg-transparent hover:bg-[#00000036] z-30'onClick={handleImageClick} />
                  <RiImageEditLine className='w-[3em] h-[3em] absolute right-1 z-30 text-slate-300' />
                  <Image
                    alt='prev-image'
                    layout='fill'
                    className='w-[10em] h-[10em] object-cover bg-center bg-no-repeat'
                    src={previewImage}
                  />
                  <input
                    id='image'
                    name='thumb'
                    type='file'
                    multiple
                    ref={inputRef}
                    className='w-full h-full' 
                    style={{ display: "none" }}
                    onChange={handleImageChange}
                  />
                </div>
              )}
            </div>

            <div className='flex justify-between w-full'>
              <input
                name='title'
                type='text'
                placeholder='Título'
                defaultValue={article?.title}
                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                  setTitle(e.target.value)
                }
                className='border-x-2 border-b w-full p-2'
              />
            </div>
          </div>
         {doc &&(<TextEditor initialDock={doc} onChange={handleDocChange} />)} 
        </form>
      </div>
    </section>
  );

  else return  null
}

Conclusão

Primeiramente gostaria de agradecer por ter disponibilizado o seu tempo para ler este tutorial e também gostaria de parabeniza-lo por ter feito este tutorial. Espero que ele tenha lhe servido e tenha sido fácil de seguir o passo a passo.

Segundo, gostria de comentar alguns pontos sobre o que acabamos de construir. Esse é o básico de um sistema de blogs e falta ainda adicionar muita coisa, como uma página pública de exibição de todos os artigos, ou uma página de registro de novos usuários, ou mesmo uma página pessoal de erro de rota 404. Caso, se durante o tutorial, você se perguntou sobre estas páginas e sentiu a sua falta, saiba que isso foi proposital. Este tutorial lhe deu experiência o bastante para ser capaz de criar essas novas áginas por você mesmo e adicionar muitas outras mais e novas funções.

Siga-me nas redes sociais:

twitter.com

No mais, muito obrigado.

E até a próxima. o/

Forem: Vitor Alecrim

Building Your Own Blog with Next.js and Node.js

Introduction

Blog Server with JWT Authentication - Powered by Node.js & MySQL

Introduction

Gondrak08 / blog-nodejs-server

A blog server made with Node.js and Mysql. This is part of a tutorial project.

Servidor para Blog - Node.js & Mysql.

Ingredientes

Como usar

Instalando aplicação.

Conectando ao Banco de dados

Libraries

Architecture

Database

Table Declaration

First Steps

Starting the Application

Installing dependencies

Creating the server

Connection to the Data Base

Middleware

Authentication

File Upload

Utilities

Routes

User

1 - /Signup - Route for the method of registering new users in our database.

2. /Login - let's declare the route for user authentication in our application.

3. /Refresh-Token - Route for re-authentication of our user in the application.

Articles

1. /add - Route to add a new article.

2. /delete/:id - For removing articles.

3. /edit/:id - Route to Edit Articles.

4. /getAll - Route for querying all Articles

5. /getById/:id - Route to get an Article by ID.

Conclusion

Building a Dynamic Blog Dashboard with Next.js

Introduction

Gondrak08 / blog-platform

A blog plataform made with Next.js/typescript.

Plataforma para blog

Ingredientes

Como usar

Server

Libraries

Creating the React Project

Configuration

Markdown

React Remark

Codemirror

Icons

Architecture

First Steps

Configuring next.config

Configuring Middleware

Configuring Authentication Route

Authentication Provider

Global Styles

Layouts

app/layout.tsx

pages/layout.tsx

API Calls

Components

Components/Navbar.tsx

Components/Loading.tsx

Components/Pagination.tsx

Components/SignOutButton

Components/ArticleCard.tsx

Components/PreviewText.tsx

Components/ArticleList.tsx

Components/TextEditor.tsx

Pages

Public Pages

Login

Article Page

Private Pages

Home

New Article

Edit Article

1. `/add` - Route to add a new article.

2. `/delete/:id` - For removing articles.

3. `/edit/:id` - Route to Edit Articles.

4. `/getAll` - Route for querying all Articles

5. `/getById/:id` - Route to get an Article by ID.

1.`/add` - Rota para adicionar novo artigo.

2. `/delete/:id` - Para a remoção de artigos.

3. `/edit/:id` - Rota para a edição de Artigos.

4. `/getAll` - Rota de consulta para todos os Artigos

5. `/getById/:id` - Rota para obter um Artigo com base no ID.