DEV Community: Asterki

"Good Code" Slows You Down

Asterki — Mon, 12 May 2025 04:28:15 +0000

Have you ever been stuck in a never-ending refactor loop while working on your own projects?
You open the repo intending to build something new — but end up tweaking that one feature you wrote two months ago. Again.

I’ve been there. Probably every programmer has.
Wanting your code to be “good” is something we all strive for — clean, readable, well-structured. It feels right.
But when you’re working alone... does it really matter?

I’m currently in the middle of a big personal project — about 50% done. Not because I’ve been building fast, but because every time I come back to it, I find something I could’ve done differently.
So I refactor. Restructure. Optimize.
And each time, it feels like I’m resetting the progress bar.

At some point, you have to ask yourself:
Do you really need all those design patterns? SOLID principles? That pristine MVC architecture?

When you’re the only one touching the code, perfect becomes the enemy of done.
You start finding “issues” that weren’t really problems. You improve the speed by 0.02%. You restructure working features just to “feel cleaner.”

Are you really sure the time you spend (or waste) on these optimizations is worth the end result?
Before heading into a week-long refactor, ask:
Is this actually moving the project forward?

Because at the end of the day, the user’s not going to email you a death threat over an internal method name — especially if you never even ship the thing.

Build it first. Make it work. Then perfect it.
That’s what betas and alphas are for — they let you publish before it’s perfect.

If you’ve got a pragmatic, get-it-done coding style when working solo, stick to it.
You don’t need overcomplicated or overengineered patterns for something you know already works.

Now — this does come with exceptions.
If you’re using the project to learn proper architecture, or you know you’ll collaborate with others later, then by all means, apply those principles.
But if not, seriously ask yourself:
Is it worth the hassle?

Create a basic dashboard for your Discord bot using Next.js 💯

Asterki — Sat, 22 Oct 2022 15:21:52 +0000

With a dashboard, it makes it easier for your bot's users to configure your bot from a web interface, instead of typing commands to configure everything, so in this tutorial I'm gonna show how to make a basic dashboard using Next.js

Things to take in consideration before starting this tutorial

I will use MongoDB as database, if you use a different database, you must change the code accordingly.
You must already have a discord app registered, if you don't know how to register one, you can learn here on how to create one.
You must have an intermediate knowledge of Next.js and Node.js.
The dashboard will run on a separated server by default, but you can add your bot's code to the dashboard's code and make them both run in the same server.
If you use a file-based database, such as quick.db, you must host the dashboard and bot in the same server, else it won't work.

For this project I'm gonna use the following technologies:

Next.js
MongoDB
Passport.js
Express.js

Setting up our Discord application

First we need to go to our app in Discord Developer Portal.
We need to get our client secret, and client id, save them somewhere, we'll need them later.
Head to OAuth2, go to general, and add your domain with the /api/auth/callback, an example: https://example.com/api/auth/callback This is where the users will be redirected when they press the authorize button, the route that will process the code given by Discord.

It looks like this now

As it says there, ** it must exactly match one of the URIs you enter here**, so please use your domain name.

Creating the Next.js app

For this example, we're gonna use SSR (Server side rendering), so I'd recommend using the Next.js template on SSR, to do this, we're gonna run the next command:

npx create-next-app --example custom-server-express discord-bot-dashboard

And we need to install our dependencies, we can install them app by using the following command:

npm install --save mongoose passport passport-discord express-session connect-mongo cookie-parser body-parser compression helmet axios discord.js

After that is done, we open our folder in our IDE of preference and start working.

Currently our project looks like this:

Now, follow the next steps to set up our file structure:

Create a folder called src
Move the pages folder into the src folder (routing will still work this way, learn more)
Inside the src folder, create a folder called styles
In the root directory of the project, create a folder called server.
Move the file named server.js into the server folder, then rename it to index.js, and since we changed the main file, we should also change it on our package.json, change the dev script to point to the index.js file inside the server folder.
Inside the server folder, create 3 folders: api,models and config.
Inside the newly created api folder, create a file called servers.js, this will be used for our server related info requests, and a file named auth.js, which will handle our auth api routes such as login, logout, etc.
Inside the config folder, create a file called auth.js, one called routes.js, one called middleware.js and another one called databases.js.

New folder structure

After that, our folder structure now looks like this

Environment variables

For this, we'll use a .env file at the root of our project, this one haves to have the following entries:

PORT, the port our Express.js app will listen to
HOST, the url of our server, for example, http://localhost:8080 (It shouldn't have the / at the end)

MONGODB_URI, our MongoDB database connection string (including authentication)

SESSION_SECRET, The secret in which our sessions will be encrypted
COOKIE_SECURE, wether our site uses SSL
COOKIE_MAX_AGE, How long should the sessions last (in miliseconds)

CLIENT_ID, Your bot's ID
CLIENT_SECRET, Your bot's secret

So an example for this .env file would be this:

.env

PORT=8080
HOST="http://localhost:8080"
MONGODB_URI="mongodb://localhost:27017/test-bot"

SESSION_SECRET="Keyboard cat"
COOKIE_SECURE="false"
COOKIE_MAX_AGE=604800000

CLIENT_ID=516688206020739243
CLIENT_SECRET=your client secret

Basic server configuration

We're now gonna open the index.js file inside the server folder, it already haves some content, generated by the npx command.

Now, we're gonna write the following code into our files

server/index.js

const express = require("express");
const next = require("next");

const port = parseInt(process.env.PORT, 10) || 8080;
const dev = process.env.NODE_ENV !== "production";

const app = next({ dev });
const handle = app.getRequestHandler();
const server = express();

app.prepare().then(() => {
    // Load the middleware
    require("./config/middleware");

    // Load the auth system
    require("./config/auth");

    // Connect to the database
    require("./config/databases");

    // Set the app's routes
    require("./config/routes");

    // Next.js routing
    server.all("*", (req, res) => {
        return handle(req, res);
    });

    // Start the server
    server.listen(port, () => {
        console.log(`> Ready on http://localhost:${port}`);
    });
});

// Export the Express.js app, since we'll use it in other files
module.exports = { server }

server/config/routes.js

// Import our app
const { server } = require("../");

try {
    // Add our api endpoints to our app
    server.use("/api/auth", require("../api/auth"));
    server.use("/api/servers", require("../api/servers"));
} catch (err) {
    // Handle errors
    console.log("There was an error trying to load the routes");
    console.error(err);
}

server/config/databases.js

const mongoose = require("mongoose");

// Connect to our MongoDB database, using the connection string
mongoose.connect(process.env.MONGODB_URI);
const mongooseClient = mongoose.connection;

// When the app connects to our MongoDB database 
mongooseClient.once('open', () => {
    console.log("MongoDB database successfully connected")
});

// If there's an error trying to connect with the database
mongooseClient.once('error', (error) => {
    console.log("There was an error trying to connect to MongoDB")
    console.log(error);
});

module.exports = { mongooseClient }

server/config/auth.js

const DiscordStrategy = require("passport-discord").Strategy;
const passport = require("passport");
const expressSession = require("express-session");

const { server } = require("../");

// The scopes we'll need
const scopes = ["identify", "guilds"];

// Serialize users
passport.serializeUser((user, done) => {
    done(null, user);
});

passport.deserializeUser((user, done) => {
    done(null, user);
});

// Add the middleware create sessions
server.use(
    expressSession({
        secret: process.env.SESSION_SECRET,
        resave: false,
        saveUninitialized: true,
        // Store the sessions to our MongoDB database, so users don't have to re login each time the server restarts
        store: mongoStore.create({
            mongoUrl: process.env.MONGODB_URI,
        }),
        // Cookie configuration
        name: "session",
        cookie: {
            secure: process.env.COOKIE_SECURE == "true",
            maxAge: parseInt(process.env.COOKIE_MAX_AGE) || 604800000,
            sameSite: true,
        },
    })
);

// Add passport.js middleware to our server
server.use(passport.initialize());
server.use(passport.session());

// Use passport.js's Discord strategy
passport.use(
    new DiscordStrategy(
        {
            // Set passport.js's configuration for the strategy
            clientID: process.env.CLIENT_ID,
            clientSecret: process.env.CLIENT_SECRET,
            callbackURL: `${process.env.HOST}/api/auth/callback`,
            scope: scopes,
        },
        (accessToken, refreshToken, profile, cb) => {
            console.log(profile) // <== To log the authorized user
            // Login the user
            return cb(null, profile);
        }
    )
);

server/config/middleware.js

// Dependencies
const cookieParser = require("cookie-parser");
const bodyParser = require("body-parser");
const compression = require("compression");
const helmet = require("helmet");

const { server } = require("../");

try {
    // Requests
    server.use(
        bodyParser.urlencoded({
            extended: true,
        })
    );
    server.use(bodyParser.json());
    server.use(cookieParser());
    server.use(compression());

    // Basic security, which is disabled in development mode
    if (process.env.NODE_ENV == "production") {
        server.use(helmet.contentSecurityPolicy());
        server.use(
            helmet.crossOriginEmbedderPolicy({
                policy: "require-corp",
            })
        );
        server.use(
            helmet.crossOriginOpenerPolicy({
                policy: "same-origin",
            })
        );
        server.use(
            helmet.crossOriginResourcePolicy({
                policy: "same-origin",
            })
        );
        server.use(
            helmet.dnsPrefetchControl({
                allow: false,
            })
        );
        server.use(
            helmet.expectCt({
                maxAge: 0,
            })
        );
        server.use(
            helmet.frameguard({
                action: "sameorigin",
            })
        );
        server.use(
            helmet.hsts({
                maxAge: 15552000,
                includeSubDomains: true,
            })
        );
        server.use(
            helmet.permittedCrossDomainPolicies({
                permittedPolicies: "none",
            })
        );
        server.use(
            helmet.referrerPolicy({
                policy: "no-referrer",
            })
        );
        server.use(helmet.ieNoOpen());
        server.use(helmet.hidePoweredBy());
        server.use(helmet.noSniff());
        server.use(helmet.originAgentCluster());
        server.use(helmet.xssFilter());
    }

    console.log(`Middleware loaded`);
} catch (err) {
    console.log(`There was an error loading the middleware`);
    console.log(err);
}

Setting up MongoDB's models

This is why we created the models folder, if you use mongoose you will be familiar with this type of folder, but if you don't, basically is a way to easily create and get entries in our database.

So, we're gonna get inside that folder and create a file named server-config.js, if you use MongoDB in your bot, this file must be the same as the one you use in your bot.

This is how we're gonna "connect" the bot and the dashboard, by using the database

If you don't have a server.js file, we're gonna create one and give it a basic example configuration:

server/models/server-config.js

const mongoose = require("mongoose");
const Schema = mongoose.Schema;

// Create the schema
const ServerConfig = new Schema({
    serverID: {
        type: String,
        required: true,
        unique: true,
    },
    prefix: {
        type: String,
        unique: false,
        default: "!",
    },
});

// Create the model using the schema, in this order: Model name, Schema, and collection we're gonna use
const model = mongoose.model("ServerConfig", ServerConfig, "servers");

// Export our model
module.exports = model;

Setting up the auth system

Now that we've configured our server, we need to add the API routes for our app, for this, we're gonna start on the server/api/auth.js file

server/api/auth.js

const express = require("express");
const passport = require("passport");

// Create our router
const router = express.Router();

// Redirect to the discord's auth page
router.get("/redirect", passport.authenticate("discord"));

// When returning from that page, authenticate and generate a session
router.get(
    "/callback",
    // Specify the auth strategy that we declared in the server/config/auth
    passport.authenticate("discord", {
        failureRedirect: "/", // If the auth failed
    }),
    function (req, res) {
        res.redirect("/dashboard"); // Successful auth
    }
);

module.exports = router;

src/pages/index.js

const Home = () => {
    return (
        <div>
            <h1>Redirect to discord's login page</h1>
            <a href="/api/auth/redirect">Login</a>
        </div>
    );
};

export default Home;

Run the server

So, basically what we've setted up, is that when we go to http://example.com we're gonna see the src/pages/index.js file, it haves a header and a link that redirects to Discord's auth page.

After the user authorizes access to their account, it will log to console their information, so, lets test it out.

Run the server on development mode

npm run dev

And now we go to http://example.com or your domain

We press the login button and we get redirected to this page

We press authorize, and then we check our console.

We get their information, and the servers they're in, now we can delete the console.log in the server/config/auth.js file.

If we see our browser, we were redirected to http://example.com/dashboard, but that page doesn't exist.

So lets create it.

Creating the server selection page

Lets get inside src/pages and get use of Next.js's routing system, learn more, and we'll create a folder called dashboard.

Inside the dashboard folder, we'll create 2 files: index.js and [server].js.

Our src file now looks like this

The [server].js file is where our users will configure our bot, and the index.js file is where our users will select the server they want to configure.

And now we follow this code

src/pages/dashboard/index.js

export const getServerSideProps = async (context) => {
    // Check if the user is logged in, if not, redirect to the login page
    if (!context.req.user)
        return {
            redirect: {
                destination: "/api/auth/redirect",
                permanent: false,
            },
        };

    return {
        // Pass the props to the page
        props: {
            user: context.req.user,
            userServers: context.req.user.guilds,
        },
    };
};

const Dashboard = (props) => {
    // Generate a map of the user's servers
    const servers = props.userServers.map((server) => {
        return (
            <li key={server.id}>
                <a href={`/dashboard/${server.id}`}>{server.name}</a>
            </li>
        );
    });

    return (
        <div>
            <h1>Please select a server</h1>

            <ul>{servers}</ul>
        </div>
    );
};

export default Dashboard;

If we login, and go to http://example.com/dashboard we will see all our servers

But, we dont want to show the servers the user is not an admin in, so we can sort them our by using discord.js permissions:

src/pages/dashboard/index.js

import discord from "discord.js"

export const getServerSideProps = async (context) => {
    // Check if the user is logged in, if not, redirect to the login page
    if (!context.req.user)
        return {
            redirect: {
                destination: "/api/auth/redirect",
                permanent: false,
            },
        };

    return {
        // Pass the props to the page
        props: {
            user: context.req.user,
            userServers: context.req.user.guilds,
        },
    };
};

const Dashboard = (props) => {
    // Generate a map of the user's servers
    const servers = props.userServers.map((server) => {
        // Sort out the servers in which the user doesn't have permissions
        let permissions = new discord.Permissions(server.permissions).toArray();
        if (!permissions.has("MANAGE_GUILD "))

        return (
            <li key={server.id}>
                <a href={`/dashboard/${server.id}`}>{server.name}</a>
            </li>
        );
    });

    return (
        <div>
            <h1>
                Hello {props.user.username}#{props.user.discriminator} Please select a server
            </h1>

            <ul>{servers}</ul>
        </div>
    );
};

export default Dashboard;

And now if we go to the same url, we'll see that the number has decreased to show only the ones we have the MANAGE_GUILD, after that, we will see that the number of servers has decreased to the ones we moderate.

So, lets click on one.

Making the server dashboard page

We will be redirected to http://example/dashboard/server_id, like this:

But the page doesn't have any content yet, so we'll add it

src/pages/dashboard/[server].js

export const getServerSideProps = async (context) => {
    // Check if the user is logged in, if not, redirect to the login page
    if (!context.req.user)
        return {
            redirect: {
                destination: "/api/auth/redirect",
                permanent: false,
            },
        };

    // Select the server given the id in the url
    const selectedServer = context.req.user.guilds.find((server) => {
        return server.id == context.params.server;
    });

    const serverPermissions = new discord.Permissions(server.permissions);

    // Check if the server is not in the user's session and if the user doesn't have permission to edit that server, if so, redirect out of the page
    if (!selectedServer || !serverPermissions.has("MANAGE_GUILD"))
        return {
            redirect: {
                destination: "/dashboard",
                permanent: false,
            },
        };

    return {
        // Pass the props to the page
        props: {
            user: context.req.user,
            selectedServer: selectedServer,
        },
    };
};

const Dashboard = (props) => {
    return (
        <div>
            <h1>
                Hello {props.user.username}#{props.user.discriminator}, you can configure {props.selectedServer.name} here
            </h1>

            <input type="text" placeholder="Prefix" />
            <button>Save</button>
        </div>
    );
};

export default Dashboard;

If we check the page, we can now see the name of the server, an input and a button:

But we need to make those elements work, but first, we need to add a backend to them.

Saving and getting configurations

Remember the server/api/servers.js we created at the start of the tutorial? Now we will use it

server/api/servers.js

const express = require("express");
const ServerConfigs = require("../models/server-config");

const router = express.Router();

router.post("/get-server-config", async (req, res) => {
    // If the user is not authenticated
    if (!req.isAuthenticated()) return res.status(403).send("unauthorized");

    // Check parameters
    if (!req.body.serverID || typeof req.body.serverID !== "string") return res.status(400).send("invalid-parameters");

    // Find the server in the bot's database using the provided id
    const serverConfig = await ServerConfigs.findOne({ serverID: req.body.serverID });

    // If there isn't a server, return
    if (!serverConfig) return res.status(400).send("server-not-found");

    // Send the configuration
    return res.send(serverConfig);
});

router.post("/save-server-config", async (req, res) => {
    // If the user is not authenticated
    if (!req.isAuthenticated()) return res.status(403).send("unauthorized");

    // Check parameters
    if (!req.body.newPrefix || !req.body.serverID) return res.status(400).send("missing-parameters");
    if (typeof req.body.newPrefix !== "string" || typeof req.body.serverID !== "string") return res.status(400).send("invalid-parameters");

    // Save the configuration
    await ServerConfigs.updateOne({ serverID: req.body.serverID }, { prefix: req.body.newPrefix });

    // Send the configuration
    return res.send("success");
});

module.exports = router;

Now we need to enable this api route, to do this, just put this into your server/config/routes.js file
server/config/routes.js

// Import our app
const { server } = require("../");

try {
    // Add our api endpoints to our app
    server.use("/api/auth", require("../api/auth"));
    server.use("/api/servers", require("../api/servers"));
} catch (err) {
    // Handle errors
    console.log("There was an error trying to load the routes");
    console.error(err);
}

I created a test configuration document on MongoDB for this tutorial

And now we make an interface for it, to connect both the server and the front-end I'm gonna use axios

src/pages/dashboard/[server].js

import axios from "axios";

export const getServerSideProps = async (context) => {
    // Check if the user is logged in, if not, redirect to the login page
    if (!context.req.user)
        return {
            redirect: {
                destination: "/api/auth/redirect",
                permanent: false,
            },
        };

    // Select the server given the id in the url
    const selectedServer = context.req.user.guilds.find((server) => {
        return server.id == context.params.server;
    });

    const serverPermissions = new discord.Permissions(server.permissions);

    // Check if the server is not in the user's session and if the user doesn't have permission to edit that server, if so, redirect out of the page
    if (!selectedServer || !serverPermissions.has("MANAGE_GUILD"))
        return {
            redirect: {
                destination: "/dashboard",
                permanent: false,
            },
        };

    // Get the server configuration
    const response = await axios({
        method: "POST",
        url: `${process.env.HOST}/api/servers/get-server-config`,
        headers: context.req.headers, // <== This part is important, if we don't add it, we won't pass our credentials, and so we wont the able to be authorized to get that information
        data: {
            serverID: selectedServer.id,
        },
    });

    return {
        // Pass the props to the page
        props: {
            user: context.req.user,
            selectedServer: selectedServer,
            selectedServerConfig: response.data, // This assuming there is a server with that
            host: process.env.HOST, // <== Important to save changes
        },
    };
};

const Dashboard = (props) => {
    const saveChanges = async (event) => {
        event.preventDefault();

        // Get the new prefix
        let newPrefix = document.querySelector("#prefix-input").value;

        // Post changes
        const response = await axios({
            method: "POST",
            url: `${props.host}/api/servers/get-server-config`,
            data: {
                serverID: props.selectedServer.id,
                newPrefix: newPrefix,
            },
        });

        // show the results
        console.log(response);
    };

    return (
        <div>
            <h1>
                Hello {props.user.username}#{props.user.discriminator}, you can configure {props.selectedServer.name} here
            </h1>

            <input defaultValue={props.selectedServerConfig.prefix} type="text" id="prefix-input" placeholder="Prefix" />
            <button onClick={saveChanges}>Save</button>
        </div>
    );
};

export default Dashboard;

Now if we go to the site, we can see that it sets the default values to the actual configuration.

If we changed the prefix, pressed save, and then check the console, we'll see that it was saved successfully:

And to test if it was changed in the database, we can go, in this case, to MongoDB Compass and check it:

And as we can see, the value changed

How to implement it with your bot

After all of this is done, you might want to change the things in the models, add more configurations, and styles, this is a very very basic dashboard only made to update one value, but it can be scaled to be whatever you want, since we're connecting the bot and the dashboard using the database, the only limitant on how much you want to control your bot from the dashboard is your imagination.

Conclussion

Thanks for reading, it's been a while since I did anything related to Discord and I remember struggling to add a dashboard, the purpose of this tutorial is to make that process simple, and learn more in the way.

All the source code for this project is in my repository at Github if you want to check it out, or clone it so you don't have to copy paste all the code in this project:
https://github.com/Asterki/basic-discord-bot-dashboard

And, I got another thing for you, if you want to support multiple languages, I already did a post on that here on dev.to, you can read it here.

How to make your site multi-language using locale

Asterki — Tue, 18 Oct 2022 22:11:59 +0000

One thing that will make your site more accessible to your users is making the site translate to the user's preferred language withouth any extension.

In this tutorial I will show a simple way to add multiple languages to your site, using a Next.js app and using the package locale.

Creating the app

To do this, we open up a terminal, and type:

npx create-next-app multi-language-tutorial

This will create our Next.js app, we can now open it with our IDE of preference, and our project will look something like this:

Installing our dependencies

This project only needs 1 dependency, locale, which we can install by running the next command:

npm install --save locale

Creating the necessary files

Now that we have our proyect, we'll create a folder called utils (On simple words, an util is a function that we use a lot, and we make it into one file so we don't have to repeat code) and a folder called locales, this folder will contain our language files.

Inside the utils folder, we will create a file called pages.js, because it's an util that we'll use in our pages.

And inside the locales folder, we will create our locale files, using the name of the language code, for example, if I wanted to translate my app to English and Spanish, their codes are en and es, respectively, so our file names will be: en.js and es.js

So far, our project looks like this:

For a list of languages codes, you can visit this website

Creating our locale files

For this, we just need to open either en.js or es.js and follow this structure:

module.exports = {
    pageName: {
        property: "Translated text",
    },
};

For example, for en.js we would put:

module.exports = {
    index: {
        welcome: "Welcome to my site",
    },
};

And for es.js we would put:

module.exports = {
    index: {
        welcome: "Bienvenido a mi sitio",
    },
};

Note that all the locale files must have the same propeties, or it might cause an error.

Coding the function

What this function does, is that, by getting the accept-language header from the user, and the supported language files, we can get the language file for the page requested.

Now that we have the files, we'll open the pages.js file, and follow the next steps:

First we'll import locale to the file.

const locale = require("locale")

Using locale, we'll create our list of locales, and we'll pass an array as a parameter, inside that array should be the language codes of the languages we'll be translating our app to, we did English and Spanish, so we'll add en and es to the array.

const supportedLanguages = new locale.Locales(["en", "es"]);

Then we need to import our locale files to our util, for this, we will make an object, and add them like this:

const languages = {
    en: require("../locales/en"),
    es: require("../locales/es"),
};

This way we can get our locale files easily later on.

Now we'll code the main function, it requires 2 parameters, header which is the user's language header, and page which is the name of the page we will try to get the language file from.

function getLanguageFile(header, page) {
    // This creates a language list of the user's preferred languages
    const locales = new locale.Locales(header); 

    // This gets the best matching language, considering our supported languages, and the ones the user prefers
    // This will returns an object but we're only interested in the code propety of this object
    // So it will return a code like "en" or "es"
    const languageCode= locales.best(supportedLanguages).code;

    // Using the language code and the page parameter, we can navigate the locale files, and get the one we need
    const langFile = languages[languageCode][page];

    // And then return that locale file
    return langFile;
}

So our full pages.js file will look like this:

const locale = require("locale");

const supportedLanguages = new locale.Locales(["en", "es"]);
const languages = {
    en: require("../locales/en"),
    es: require("../locales/es"),
};

function getLanguageFile(header, page) {
    const locales = new locale.Locales(header);
    const langCode = locales.best(supportedLanguages).code;

    const langFile = languages[langCode][page];
    return langFile;
}

module.exports = { getLanguageFile };

Using our function in our pages

Now that we have the function, we can use it on our page, to do this, we will go to to pages/index.js and write the following code:

// Import our function to the page
import { getLanguageFile } from "../utils/pages"

// Generate the props for our page
export const getServerSideProps = (context) => {
    // Get the language header from our page context
    const languageHeader = context.req.headers["accept-language"]

    // Using that header, get our locale file
    // We pass "index" as argument because that's our page name, and that's what we added to our locale files
    const languageFile = getLanguageFile (languageHeader , "index")

    // Return the props to the page to render
    return {
        props: {
            lang: languageFile,
        },
    };
};

const Index = (props) => {
    return (
        <div>
            {/* Example of usage */}
            <h1>{props.lang.welcome}</h1>
        </div>
    );
};

export default Index;

As you can see in the following image, They're both related.

Adding more languages

To add more languages to your app, you just need to create the file with the language code in the locales folder, and add it to the supported languages array in our util.

Thanks for reading, I hope this guide is useful for you, you can ask any question in the comments.