DEV Community: Ángel Quiroz

Installing Multiple Versions of PHP on Ubuntu, Debian (also WSL).

Ángel Quiroz — Sat, 04 May 2024 06:30:49 +0000

Installing multiple versions of PHP on your Ubuntu or Debian system can be incredibly useful for development and testing purposes. It allows you to seamlessly switch between different PHP versions to ensure compatibility with various projects or frameworks. In this tutorial, we'll walk through the steps to install multiple versions of PHP using a simple Bash script. By the end of this tutorial, you'll have a system with multiple PHP versions installed, ready to tackle any PHP development challenge that comes your way. Let's get started!

Step 1: Prepare Your System

Before installing multiple versions of PHP, ensure that your system is up-to-date and has necessary dependencies installed. Open a terminal and run the following commands:



sudo apt update
sudo apt install software-properties-common

Step 2: Download the Script

Copy the provided script into a file on your system. You can use any text editor to create the file. Let's name it install_php_versions.sh.



nano install_php_versions.sh

Paste the script into the file and save it.

Step 3: Make the Script Executable

Make the script executable using the following command:



chmod +x install_php_versions.sh

Step 4: Run the Script

Now, you can execute the script to install multiple versions of PHP. Run the following command:



./install_php_versions.sh

The script will add the Ondřej Surý PPA repository, update package lists, and install PHP versions 5.6, 7.0, 7.1, 7.2, 7.3, 7.4, and 8.0.

Step 5: Verify Installation

After the script completes, you can verify that all PHP versions are installed correctly by running:



php -v

This command will display the version of PHP currently active in your system. You can also switch between installed PHP versions using appropriate commands depending on your needs.

Step 6: Optional Configuration

If you need to set a default PHP version, you can use the update-alternatives command as indicated in the script. Replace X.X with the version you want to set as default.

Step 7: Restart Web Server

If you have a web server installed (Apache or Nginx), the script will attempt to restart it after installing PHP versions. If you encounter any issues with your web server, restart it manually.

Step 8: Finish

You have now successfully installed multiple versions of PHP on your system. You can use any installed version based on your project requirements.

That's it! You now have multiple versions of PHP installed on your Ubuntu or Debian system. If you have any questions or encounter any issues, feel free to ask for further assistance.

Below is the complete script for your reference:



#!/bin/bash

# Check if the Ondřej Surý PPA repository is already added
if ! grep -q "ondrej/php" /etc/apt/sources.list /etc/apt/sources.list.d/*; then
    echo "Adding Ondřej Surý PPA repository to get the latest PHP versions..."
    sudo add-apt-repository -y ppa:ondrej/php
    sudo apt update
fi

# Function to install a PHP version
install_php_version() {
    local version="$1"
    sudo apt install -y "php$version" "php$version-cli" "php$version-fpm"
}

# Start installation message
echo "Starting installation of PHP versions..."

# Install different PHP versions
versions=("5.6" "7.0" "7.1" "7.2" "7.3" "7.4" "8.0")
for version in "${versions[@]}"; do
    install_php_version "$version"
    echo "PHP $version installed successfully."
done

# Completion message
echo "All PHP versions have been installed successfully."

# Set default PHP version (optional)
# sudo update-alternatives --set php /usr/bin/phpX.X  # Replace X.X with desired version

# Check if Apache is installed and restart the web server
if command -v apache2ctl &>/dev/null; then
    sudo systemctl restart apache2
    echo "Apache restarted."
elif command -v nginx &>/dev/null; then
    sudo systemctl restart nginx
    echo "Nginx restarted."
else
    echo "No web server detected."
fi

# Check installed PHP versions
php -v

# Check all installed PHP versions
dpkg -l | grep php | awk '{print $2}' | grep -E "^php[0-9]+\.[0-9]+$"

Simple Internationalization (i18n) for Nextjs (App Router) with Server Actions and cookies

Ángel Quiroz — Thu, 21 Sep 2023 01:11:35 +0000

I write a simple implementation for translations using only server actions and cookies in Next.js 13 with App Router and Server Actions enabled.

If do you want the source code:

Github Repo

First, enable experimental Server Actions feature in next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverActions: true,
  },
};

module.exports = nextConfig;

Then, create a simple file with translations:
src/lib/i18n.ts

export enum Locale {
  en = "en",
  es = "es",
}

export const DEFAULT_LOCALE = Locale.en;

export const translations = {
  [Locale.en]: {
    home: {
      title: "Simple i18n example with Next.js Server Actions",
      paragraph:
        "This example provides a simple i18n implementation with Next.js Server Actions using cookies.",
      button: "Join the waitlist",
      subtitle: "Join the waitlist to get early access to the app.",
      terms: "Terms & Conditions",
      placeholder: "Enter your email",
    },
    buttons: {
      en: "English",
      es: "Spanish",
    },
  },
  [Locale.es]: {
    home: {
      title: "Ejemplo simple de i18n con Next.js Server Actions",
      paragraph:
        "Este ejemplo proporciona una implementación simple de i18n con Next.js Server Actions usando cookies.",
      button: "Únete a la lista de espera",
      subtitle:
        "Únete a la lista de espera para obtener acceso anticipado a la aplicación.",
      terms: "Términos y Condiciones",
      placeholder: "Ingresa tu email",
    },
    buttons: {
      en: "Inglés",
      es: "Español",
    },
  },
};

export type TranslationKey = keyof (typeof translations)[Locale];

Next, create a file for server action for set cookie and redirect to home:
src/app/actions.ts

"use server";

import { DEFAULT_LOCALE, Locale } from "@/lib/i18n";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";

export async function changeLocale(formData: FormData) {
  const localeValue = formData.get("locale");
  if (!localeValue || typeof localeValue !== "string") {
    return redirect("/");
  }

  const locale = localeValue as Locale;
  if (!(locale in Locale)) {
    cookies().set("locale", DEFAULT_LOCALE);
    return redirect("/");
  }

  cookies().set("locale", localeValue);
  return redirect("/");
}

Finally, read cookies for get translation in any page:
src/app/page.tsx

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import Link from "next/link";
import { changeLocale } from "./actions";
import { cookies } from "next/headers";
import { Locale, translations } from "@/lib/i18n";

import type { Metadata, ResolvingMetadata } from "next";

type Props = {
  params: { id: string };
  searchParams: { [key: string]: string | string[] | undefined };
};

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const cookieStore = cookies();
  const locale = (cookieStore.get("locale")?.value || "en") as Locale;

  return {
    title: translations[locale].home.title,
  };
}

export default function Home() {
  const cookieStore = cookies();
  const locale = (cookieStore.get("locale")?.value || "en") as Locale;
  return (
    <main className="w-full h-screen py-12 md:py-24 lg:py-32 xl:py-48 bg-black">
      <div className="container px-4 md:px-6">
        <div className="grid gap-6 items-center">
          <div className="flex flex-col justify-center space-y-4 text-center">
            <div className="space-y-2">
              <h1 className="text-3xl font-bold tracking-tighter  sm:text-5xl xl:text-6xl/none bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-500">
                {translations[locale].home.title}
              </h1>
              <p className="max-w-[600px] text-zinc-200 md:text-xl dark:text-zinc-100 mx-auto">
                {translations[locale].home.paragraph}
              </p>
            </div>
            <div className="w-full max-w-sm space-y-2 mx-auto">
              <form className="flex flex-col sm:flex-row items-center gap-2">
                <Input
                  className="max-w-lg flex-1 bg-gray-800 text-white border-gray-900"
                  placeholder={translations[locale].home.placeholder}
                  type="email"
                />
                <Button className="bg-white text-black" type="submit">
                  {translations[locale].home.button}
                </Button>
              </form>
              <p className="text-xs text-zinc-200 dark:text-zinc-100 space-x-2">
                <span>{translations[locale].home.subtitle}</span>
                <Link
                  className="underline underline-offset-2 text-white"
                  href="/terms">
                  {translations[locale].home.terms}
                </Link>
              </p>
              <form action={changeLocale} method="post">
                <input type="hidden" name="locale" value="en" />
                <button type="submit">{translations[locale].buttons.en}</button>
              </form>
              <form action={changeLocale} method="post">
                <input type="hidden" name="locale" value="es" />
                <button type="submit">{translations[locale].buttons.es}</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </main>
  );
}

I using shadcn/ui for UI Components.

The results are in this url:

Building a Rock-Solid Angular CI/CD Pipeline with GitLab: A Step-by-Step Guide

Ángel Quiroz — Wed, 26 Apr 2023 03:55:24 +0000

GitLab CI/CD is a powerful tool that can be used to automate the build, test, and deployment of software applications. With GitLab CI/CD, you can define a set of rules that govern how your application is built, tested, and deployed, and then let GitLab take care of the rest.

In this tutorial, we will be looking at a GitLab CI/CD pipeline configuration file and explaining what each section does.

Let's start by taking a look at the default section:

default:
  interruptible: true
  image: node:lts-alpine

This section defines the default settings for the entire pipeline. In this case, we have set the interruptible flag to true, which means that the pipeline can be interrupted by a user or by another job. We have also set the image to node:lts-alpine, which means that each job in the pipeline will be run in a Docker container based on the node:lts-alpine image.

Next, we have the stages section:

stages:
  - dependencies
  - quality
  - assemble
  - deploy

This section defines the stages that the pipeline will go through. Each stage represents a different step in the process of building, testing, and deploying the application. In this case, we have defined four stages: dependencies, quality, assemble, and deploy.

Now, let's look at the install job:

install:
  stage: dependencies
  script:
    # Install dependencies
    - npm install --prefer-offline
  cache:
    key:
      files:
        - package.json
    paths:
      - node_modules

This job is part of the dependencies stage and is responsible for installing the application's dependencies. We use the npm command to install the dependencies and use the --prefer-offline flag to ensure that cached versions of dependencies are used if available. We also define a cache for the node_modules directory based on the package.json file.

Next, we have the lint job:

lint:
  stage: quality
  needs: ["install"]
  script:
    - npm run lint
  cache:
    key:
      files:
        - package.json
    paths:
      - node_modules
    policy: pull

This job is part of the quality stage and is responsible for running the application's linter. We define a dependency on the install job using the needs keyword. We use the npm run lint command to run the linter and define a cache for the node_modules directory based on the package.json file. We also set the cache policy to pull, which means that GitLab will attempt to pull the cache from a remote cache server before running the job.

Next, we have the test job:

test:
  stage: quality
  needs: ["install"]
  before_script:
    # Download Chrome
    - apk add chromium
    - export CHROME_BIN=/usr/bin/chromium-browser
    - export CHROME_PATH=/usr/lib/chromium/
    # Download Firefox
    - apk add firefox-esr
    - export FIREFOX_BIN=/usr/bin/firefox
    - export FIREFOX_PATH=/usr/lib/firefox/
    # X Server
    - apk add xvfb
    - export DISPLAY=:99
    - Xvfb :99 -screen 0 1024x768x24 > /dev/null

script:
    - npm run test -- --browsers=Headless_Chrome --no-watch

This was the stage that was the most difficult to solve, this is responsible for running automated tests for the project. This stage has a before_script section where we download and configure web browsers (Chrome and Firefox) as well as an X Server for headless testing. The script section runs the automated tests using the npm run test command with the --browsers=Headless_Chrome --no-watch options. The cache configuration is similar to the previous stages.

The config for the Headless browser is like

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    ...
    browsers: ["Chrome"],
    customLaunchers: {
      Headless_Chrome: {
        base: "Chrome",
        flags: ["--no-sandbox", "--disable-gpu"],
      },
    }
  });
};

The assemble stage is responsible for building the project. It depends on the test and lint stages and has a script section that runs the npm run build command. The artifacts section specifies that the resulting dist directory should be stored as a build artifact. The cache configuration is similar to the previous stages.

Finally, we have the deploy stage, which is responsible for deploying the project. It depends on the assemble stage and has a variables section that sets the NODE_ENV environment variable to "production". The before_script section simply echoes the name of the environment that we're deploying to.

We also have two different deploy-* jobs that extend the deploy stage with specific configuration for different environments. These jobs are triggered manually and have a variables section that sets the NODE_ENV environment variable to "development" or "staging". The script section for each of these jobs echoes the name of the environment that we're deploying to and runs any additional deployment actions that are required.

Complete file

default:
  interruptible: true
  image: node:lts-alpine

stages:
  - dependencies
  - quality
  - assemble
  - deploy

install:
  stage: dependencies
  script:
    # Install dependencies
    - npm install --prefer-offline
  cache:
    key:
      files:
        - package.json
    paths:
      - node_modules

lint:
  stage: quality
  needs: ["install"]
  script:
    - npm run lint
  cache:
    key:
      files:
        - package.json
    paths:
      - node_modules
    policy: pull

test:
  stage: quality
  needs: ["install"]
  before_script:
    # Download Chrome
    - apk add chromium
    - export CHROME_BIN=/usr/bin/chromium-browser
    - export CHROME_PATH=/usr/lib/chromium/
    # Download Firefox
    - apk add firefox-esr
    - export FIREFOX_BIN=/usr/bin/firefox
    - export FIREFOX_PATH=/usr/lib/firefox/
    # X Server
    - apk add xvfb
    - export DISPLAY=:99
    - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
  script:
    - npm run test -- --browsers=Headless_Chrome --no-watch
  cache:
    key:
      files:
        - package.json
    paths:
      - node_modules
    policy: pull

assemble:
  stage: assemble
  needs: ["test", "lint"]
  script:
    - npm run build
  artifacts:
    paths:
      - $CI_PROJECT_DIR/dist
  cache:
    key:
      files:
        - package.json
    paths:
      - node_modules
    policy: pull

.deploy:
  stage: deploy
  variables:
    NODE_ENV: production
  needs: ["assemble"]
  before_script:
    - echo "Deploying to $CI_ENVIRONMENT_NAME"

deploy-dev:
  extends: .deploy
  variables:
    NODE_ENV: development
  script:
    - echo "Deploying to $CI_ENVIRONMENT_NAME"
    - echo "Making actions to deploy to dev"
    - echo "Deployed to $CI_ENVIRONMENT_NAME"

deploy-staging:
  extends: .deploy
  rules:
    - when: manual
      allow_failure: true
  variables:
    NODE_ENV: staging
  script:
    - echo "Deploying to $CI_ENVIRONMENT_NAME"
    - echo "Making actions to deploy to staging"
    - echo "Deployed to $CI_ENVIRONMENT_NAME"

Overall, this CI/CD configuration is a solid foundation for building, testing, and deploying a Node.js project. The use of caching and artifacts can help speed up the build process, and the separation of stages allows for greater control over the entire pipeline.

Using next-i18next & NextAuth.js in the same NextJS app

Ángel Quiroz — Sun, 17 Apr 2022 16:05:48 +0000

This is my first tutorial, the intention of this one is to make life easier and save time for those who need to implement these technologies in the same project, it took me a while to implement it and I want to share it with whoever may need it.
I hope you find it useful...

1. We create a new project as indicated in the documentation.

I'm going to do it with Typescript but with Javascript the steps are the same.



npx create-next-app@latest --typescript

You type the name of your project and wait for the dependencies to be installed, then you run VSCode or your code editor in the project folder.
Now in the terminal type.



npm run dev

This will start the development server on port 3000.

2. Install and configure next-i18next

As indicated in the project repository we run



yarn add next-i18next 
# Si usas NPM ejecuta:
npm i --save next-i18next

Now we create two folders with json files to test the translations:



└─ public
   └ locales
     ├─en
     | └─ common.json
     └─es
       └─ common.json

Then we create a next-i18next.config.js file in the root of the project with the following content:



module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es'],
  },
};

Then in the next.config.js file we import the configuration:



/** @type {import('next').NextConfig} */
const { i18n } = require("./next-i18next.config");
const nextConfig = {
  reactStrictMode: true,
  i18n,
};

module.exports = nextConfig;

Finally we edit the pages/_app.tsx file to run the application with translations, the change is made in the last line.



import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { appWithTranslation } from 'next-i18next';

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default appWithTranslation(MyApp);

3. Add and test translations.

In the files public/locales/en/common.json and public/locales/en/common.json we add the translations in this way:
public/locales/en/common.json



{
  "welcome": "Welcome to the world of Next.js!",
  "content": "This is the blog index page"
}

public/locales/en/common.json



{
  "welcome": "Bienvenido al mundo de Next.js!",
  "content": "Esta es la página de inicio del blog"
}

Now, this step is important, for the translations to work correctly, they must be called from the server in all the components at page level for it to perform the "hydration" correctly, in this case we edit our pages/index.tsx file to pass the translations, so we can call each translation individually we use



const { t } = useTranslation('common');

The file in this case looks like this:



import type { NextPage, NextPageContext } from 'next';
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';

const Home: NextPage = () => {
  const { t } = useTranslation('common');
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>{t('welcome')}</h1>

        <p className={styles.description}>{t('content')}</p>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
};

export default Home;
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';

export async function getStaticProps({ locale }: NextPageContext) {
  return {
    props: {
      ...(await serverSideTranslations(locale || 'en', ['common'])),
    },
  };
}

The result is the translated page with the language detected in the system.

If we want to manually test the language change we have to change the configuration, I will also add another line that will serve to upload our project to Vercel, the file looks like this:



const path = require('path');

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es'],
    localeDetection: false,
    localePath: path.resolve('./public/locales'), // for deployment on Vercel
  },
};

We will also create a button to change the language manually, the pages/index.tsx file would look like this:



import type { NextPage, NextPageContext } from 'next';
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';
import { useRouter } from 'next/router';

const Home: NextPage = () => {
  const router = useRouter();
  const { pathname, asPath, query } = router;
  const { t } = useTranslation('common');
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>{t('welcome')}</h1>

        {/* Language Change Button */}
        <button
          type="button"
          onClick={() => {
            router.push({ pathname, query }, asPath, {
              locale: router.locale === 'es' ? 'en' : 'es',
            });
          }}
        >
          {router.locale === 'es' ? 'English' : 'Español'}
        </button>

        <p className={styles.description}>{t('content')}</p>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
};

export default Home;
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';

export async function getStaticProps({ locale }: NextPageContext) {
  return {
    props: {
      ...(await serverSideTranslations(locale || 'en', ['common'])),
    },
  };
}

In this way we already have our application working perfectly with two languages based on the route

4. We configure authentication with next-auth

First we install the package:



npm i --save next-auth

For testing purposes we will use credentials (email and password), also we will do a simple validation, doing it correctly depends on what you want in your project, if you comment I can do a tutorial explaining how to do the authentication with different providers and using a customizable home page. That said we continue...

We create a pages/api/auth/[...nextauth].ts file.
With the following content:



import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: 'credentials',
      credentials: {
        email: {
          label: 'Email',
          type: 'email',
          placeholder: 'email@example.com',
        },
        password: {
          label: 'Password',
          type: 'password',
          placeholder: '********',
        },
      },
      async authorize(credentials) {
        if (credentials && credentials.email && credentials.password) {
          if (
            credentials.email === 'test@test.com' &&
            credentials.password === 'test'
          ) {
            return {
              email: credentials.email,
              image: 'https://i.pravatar.cc/500',
              name: 'Test User',
            };
          }
        }
        return null;
      },
    }),
  ],
  callbacks: {
    jwt: async ({ token }) => {
      return token;
    },
    session: ({ session, token }) => {
      if (token) {
        session.id = token.id;
      }
      return session;
    },
  },
  secret: 'my-secret',
  jwt: {
    secret: 'my-secret',
    maxAge: 60 * 60 * 24 * 30,
  },
});

Then we add the pages/index.tsx file to have an authentication or logout button in addition to the language change.



import type { NextPage, NextPageContext } from 'next';
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';
import { useRouter } from 'next/router';
import { useSession, signIn, signOut } from 'next-auth/react';

const Home: NextPage = () => {
  const router = useRouter();
  const { pathname, asPath, query } = router;
  const { t } = useTranslation('common');
  const { data: session } = useSession();

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>{t('welcome')}</h1>

        {/* Language Change Button */}
        <button
          type="button"
          onClick={() => {
            router.push({ pathname, query }, asPath, {
              locale: router.locale === 'es' ? 'en' : 'es',
            });
          }}
        >
          {router.locale === 'es' ? 'English' : 'Español'}
        </button>

        {/* Authentication Button */}
        {session ? (
          <>
            <h4>
              {t('welcome')} {JSON.stringify(session.user)}
            </h4>
            <button
              type="button"
              onClick={() => {
                signOut();
              }}
            >
              {t('signOut')}
            </button>
          </>
        ) : (
          <button
            type="button"
            onClick={() => {
              signIn();
            }}
          >
            {t('signIn')}
          </button>
        )}

        <p className={styles.description}>{t('content')}</p>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
};

export default Home;
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';

export async function getStaticProps({ locale }: NextPageContext) {
  return {
    props: {
      ...(await serverSideTranslations(locale || 'en', ['common'])),
    },
  };
}

Now the most important thing, probably the reason why you come to this post, and personally what I found most difficult to solve, just make a small change in the pages/_app.tsx file so that the SessionProvider does not collide with the Translation Provider:



import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { appWithTranslation } from 'next-i18next';
import { SessionProvider } from 'next-auth/react';

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

const AppWithI18n = appWithTranslation(MyApp);

const AppWithAuth = (props: AppProps) => (
  <SessionProvider session={props.pageProps.session}>
    <AppWithI18n {...props} />
  </SessionProvider>
);

export default AppWithAuth;

And that's it, now we can change the language of our page and have the authentication in the same NextJS application.

I hope I helped you, if you have any comments or questions leave them in the comments to help more developers.

Usar next-i18next & NextAuth.js en la misma aplicación de NextJS

Ángel Quiroz — Sun, 17 Apr 2022 15:57:55 +0000

Este es mi primer tutorial, la intención de este es facilitar la vida y ahorrar el tiempo de quien necesite implementar estas tecnologías en un mismo proyecto, a mí me costó un poco implementarlo y quiero compartirlo con quien lo pueda necesitar.
Espero les sirva...

1. Creamos un nuevo proyecto como indica la documentación.

Lo voy a hacer con Typescript pero con Javascript los pasos son los mismos.

npx create-next-app@latest --typescript

Escribes el nombre de tu proyecto y esperas a que se instalen las dependencias, luego ejecutas VSCode o tu editor de código en la carpeta del proyecto.
Ahora en la terminal escribes

npm run dev

Esto iniciará el servidor de desarrollo en el puerto 3000.

2. Instalamos y configuramos next-i18next

Como indica el repositorio del proyecto ejecutamos

yarn add next-i18next 
# Si usas NPM ejecuta:
npm i --save next-i18next

Ahora creamos dos carpetas con archivos json para probar las traducciones:

└─ public
   └ locales
     ├─en
     | └─ common.json
     └─es
       └─ common.json

Después creamos un archivo next-i18next.config.js en la raíz del proyecto con el siguiente contenido:

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es'],
  },
};

Luego en el archivo next.config.js importamos la configuración:

/** @type {import('next').NextConfig} */
const { i18n } = require("./next-i18next.config");
const nextConfig = {
  reactStrictMode: true,
  i18n,
};

module.exports = nextConfig;

Finalmente editamos el archivo pages/_app.tsx para ejecutar la aplicación con traducciones, el cambio se hace en la última línea.

import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { appWithTranslation } from 'next-i18next';

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default appWithTranslation(MyApp);

3. Agregamos y probamos las traducciones.

En los archivos public/locales/en/common.json y public/locales/es/common.json agregamos las traducciones de esta manera:
public/locales/en/common.json

{
  "welcome": "Welcome to the world of Next.js!",
  "content": "This is the blog index page"
}

public/locales/en/common.json

{
  "welcome": "Bienvenido al mundo de Next.js!",
  "content": "Esta es la página de inicio del blog"
}

Ahora, este paso es importante, para que las traducciones funcionen correctamente, deben ser llamadas desde el servidor en todos los componentes a nivel de página para que este realice la "hidratación" de manera correcta, en este caso editamos nuestro archivo pages/index.tsx para pasar las traducciones, para poder llamar cada traducción de manera individual usamos

const { t } = useTranslation('common');

El archivo en este caso queda así:

import type { NextPage, NextPageContext } from 'next';
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';

const Home: NextPage = () => {
  const { t } = useTranslation('common');
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>{t('welcome')}</h1>

        <p className={styles.description}>{t('content')}</p>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
};

export default Home;
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';

export async function getStaticProps({ locale }: NextPageContext) {
  return {
    props: {
      ...(await serverSideTranslations(locale || 'en', ['common'])),
    },
  };
}

El resultado es la página traducida con el idioma detectado en el sistema.

Si queremos probar manualmente el cambio de idioma hay que cambiar la configuración, además agregaré otra línea que servirá para subir nuestro proyecto a Vercel, el archivo queda así:

const path = require('path');

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es'],
    localeDetection: false,
    localePath: path.resolve('./public/locales'), // for deployment on Vercel
  },
};

También crearemos un boton para hacer el cambio de idioma de manera manual, el archivo pages/index.tsx quedaría así:

import type { NextPage, NextPageContext } from 'next';
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';
import { useRouter } from 'next/router';

const Home: NextPage = () => {
  const router = useRouter();
  const { pathname, asPath, query } = router;
  const { t } = useTranslation('common');
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>{t('welcome')}</h1>

        {/* Language Change Button */}
        <button
          type="button"
          onClick={() => {
            router.push({ pathname, query }, asPath, {
              locale: router.locale === 'es' ? 'en' : 'es',
            });
          }}
        >
          {router.locale === 'es' ? 'English' : 'Español'}
        </button>

        <p className={styles.description}>{t('content')}</p>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
};

export default Home;
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';

export async function getStaticProps({ locale }: NextPageContext) {
  return {
    props: {
      ...(await serverSideTranslations(locale || 'en', ['common'])),
    },
  };
}

De esta forma ya tenemos nuestra aplicación trabajando perfectamente con dos idiomas basados en la ruta

4. Configuramos la autenticación con next-auth

Primero instalamos el paquete:

npm i --save next-auth

Para propósitos de prueba usaremos credenciales (email y contraseña), además haremos una validación sencilla, el hacerla de manera correcta depende de lo que quieras en tu proyecto, si lo comentas puedo hacer un tutorial explicando cómo hacer la autenticación con diferentes proveedores y usando una página de inicio customizable. Dicho eso seguimos...

Creamos un archivo pages/api/auth/[...nextauth].ts
Con el siguiente contenido:

import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: 'credentials',
      credentials: {
        email: {
          label: 'Email',
          type: 'email',
          placeholder: 'email@example.com',
        },
        password: {
          label: 'Password',
          type: 'password',
          placeholder: '********',
        },
      },
      async authorize(credentials) {
        if (credentials && credentials.email && credentials.password) {
          if (
            credentials.email === 'test@test.com' &&
            credentials.password === 'test'
          ) {
            return {
              email: credentials.email,
              image: 'https://i.pravatar.cc/500',
              name: 'Test User',
            };
          }
        }
        return null;
      },
    }),
  ],
  callbacks: {
    jwt: async ({ token }) => {
      return token;
    },
    session: ({ session, token }) => {
      if (token) {
        session.id = token.id;
      }
      return session;
    },
  },
  secret: 'my-secret',
  jwt: {
    secret: 'my-secret',
    maxAge: 60 * 60 * 24 * 30,
  },
});

Luego aditamos el archivo pages/index.tsx para tener un botón de autenticación o de logout además del cambio de idioma.

import type { NextPage, NextPageContext } from 'next';
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';
import { useRouter } from 'next/router';
import { useSession, signIn, signOut } from 'next-auth/react';

const Home: NextPage = () => {
  const router = useRouter();
  const { pathname, asPath, query } = router;
  const { t } = useTranslation('common');
  const { data: session } = useSession();

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>{t('welcome')}</h1>

        {/* Language Change Button */}
        <button
          type="button"
          onClick={() => {
            router.push({ pathname, query }, asPath, {
              locale: router.locale === 'es' ? 'en' : 'es',
            });
          }}
        >
          {router.locale === 'es' ? 'English' : 'Español'}
        </button>

        {/* Authentication Button */}
        {session ? (
          <>
            <h4>
              {t('welcome')} {JSON.stringify(session.user)}
            </h4>
            <button
              type="button"
              onClick={() => {
                signOut();
              }}
            >
              {t('signOut')}
            </button>
          </>
        ) : (
          <button
            type="button"
            onClick={() => {
              signIn();
            }}
          >
            {t('signIn')}
          </button>
        )}

        <p className={styles.description}>{t('content')}</p>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
};

export default Home;
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';

export async function getStaticProps({ locale }: NextPageContext) {
  return {
    props: {
      ...(await serverSideTranslations(locale || 'en', ['common'])),
    },
  };
}

Ahora lo más importante, seguramente la razón por la que vienes a este post, y personalmente lo que más me costó solucionar, solo hay que hacer un pequeño cambio en el archivo pages/_app.tsx para que el SessionProvider no choque con el Provider de Traducción:

import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { appWithTranslation } from 'next-i18next';
import { SessionProvider } from 'next-auth/react';

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

const AppWithI18n = appWithTranslation(MyApp);

const AppWithAuth = (props: AppProps) => (
  <SessionProvider session={props.pageProps.session}>
    <AppWithI18n {...props} />
  </SessionProvider>
);

export default AppWithAuth;

¡Y listo!, ahora podemos cambiar el idioma de nuestra página y tener la autenticación en la misma aplicación de NextJS.

Espero haberte ayudado, si tienes alguna observación o duda déjala en los comentarios para ayudar a más desarrolladores.