How can I use this package with Next Js?

[sabbirzzaman]

I'm trying to implement i18n-perser with Next Js. According to the i18n-perser documentation, I created a gulpfile.js on the root directory. I tried probably every possible way to create the to use it with Next Js but it's not working. When I'm using npm run gulp command it's giving me SyntaxError: Cannot use import statement outside a module error. I also tried by renaming the gulpfile to gulpfile.mjs then it gives me FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory.

Can you help me with how can I integrate i18n-perser with my Next Js 13 project? My gulpfile.js is something like this:

import gulp from 'gulp';
import { gulp as i18nextParser } from 'i18next-parser';

export async function i18next() {
  return gulp
    .src('./**')
    .pipe(
      new i18nextParser({
        locales: ['en', 'nl'],
        output: './i18n/locales/$LOCALE/$NAMESPACE.json',
      })
    )
    .pipe(gulp.dest('./'));
}

[sabbirzzaman]

For Next Js integration, we can set up the gulpfile.js file configuration like this:

async function i18next() {
  const gulp = (await import("gulp")).default;
  const i18nextParser = (await import("i18next-parser")).gulp;
  gulp
    .src(["./pages/**", "./components/**", "./layouts/**", "./lib/**"])
    .pipe(
      new i18nextParser({
        locales: ["en", "nl"],
        output: "./i18n/locales/$LOCALE/$NAMESPACE.json",
      })
    )
    .pipe(gulp.dest("./"));
}

module.exports.i18next = i18next;

[crazyyi]

@sabbirzzaman Thanks this works great. How about watching the changes in keys or values of source languages? Do I need to start a new gulp function or continue to use pipe?