zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Next.js Supabase V3 (#463)

Browse Source 
Version 3 of the kit:
- Radix UI replaced with Base UI (using the Shadcn UI patterns)
- next-intl replaces react-i18next
- enhanceAction deprecated; usage moved to next-safe-action
- main layout now wrapped with [locale] path segment
- Teams only mode
- Layout updates
- Zod v4
- Next.js 16.2
- Typescript 6
- All other dependencies updated
- Removed deprecated Edge CSRF
- Dynamic Github Action runner
This commit is contained in:
Giancarlo Buomprisco
2026-03-24 13:40:38 +08:00
committed by GitHub
parent 4912e402a3
commit 7ebff31475
840 changed files with 71395 additions and 20095 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/i18n/eslint.config.mjs
View File

@@ -1,3 +0,0 @@
import eslintConfigBase from '@kit/eslint-config/base.js';
export default eslintConfigBase;

54
packages/i18n/package.json
View File

@@ -1,41 +1,35 @@
{
"name": "@kit/i18n",
"private": true,
"version": "0.1.0",
"scripts": {
"clean": "git clean -xdf .turbo node_modules",
"format": "prettier --check \"**/*.{ts,tsx}\"",
"lint": "eslint .",
"typecheck": "tsc --noEmit"
},
"prettier": "@kit/prettier-config",
"exports": {
".": "./src/index.ts",
"./server": "./src/i18n.server.ts",
"./client": "./src/i18n.client.ts",
"./provider": "./src/i18n-provider.tsx"
},
"devDependencies": {
"@kit/eslint-config": "workspace:*",
"@kit/prettier-config": "workspace:*",
"@kit/shared": "workspace:*",
"@kit/tsconfig": "workspace:*",
"@tanstack/react-query": "catalog:",
"next": "catalog:",
"react": "catalog:",
"react-dom": "catalog:",
"react-i18next": "catalog:"
},
"dependencies": {
"i18next": "catalog:",
"i18next-browser-languagedetector": "catalog:",
"i18next-resources-to-backend": "catalog:"
},
"private": true,
"type": "module",
"typesVersions": {
"*": {
"*": [
"src/*"
]
}
},
"exports": {
".": "./src/index.ts",
"./routing": "./src/routing.ts",
"./navigation": "./src/navigation.ts",
"./provider": "./src/client-provider.tsx"
},
"scripts": {
"clean": "git clean -xdf .turbo node_modules",
"typecheck": "tsc --noEmit"
},
"dependencies": {
"next-intl": "catalog:"
},
"devDependencies": {
"@kit/shared": "workspace:*",
"@kit/tsconfig": "workspace:*",
"@tanstack/react-query": "catalog:",
"@types/react": "catalog:",
"next": "catalog:",
"react": "catalog:",
"react-dom": "catalog:"
}
}

46
packages/i18n/src/client-provider.tsx Normal file
View File

@@ -0,0 +1,46 @@
'use client';
import type { ReactNode } from 'react';
import type { AbstractIntlMessages } from 'next-intl';
import { NextIntlClientProvider } from 'next-intl';
const isDevelopment = process.env.NODE_ENV === 'development';
interface I18nClientProviderProps {
locale: string;
messages: AbstractIntlMessages;
children: ReactNode;
timeZone?: string;
}
/**
* Client-side provider for next-intl.
* Wraps the application and provides translation context to all client components.
*/
export function I18nClientProvider({
locale,
messages,
timeZone = 'UTC',
children,
}: I18nClientProviderProps) {
return (
<NextIntlClientProvider
locale={locale}
messages={messages}
timeZone={timeZone}
getMessageFallback={(info) => {
// simply fallback to the key as is
return info.key;
}}
onError={(error) => {
if (isDevelopment) {
// Missing translations are expected and should only log an error
console.warn(`[Dev Only] i18n error: ${error.message}`);
}
}}
>
{children}
</NextIntlClientProvider>
);
}

42
packages/i18n/src/create-i18n-settings.ts
View File

@@ -1,42 +0,0 @@
import type { InitOptions } from 'i18next';
/**
* Get i18n settings for i18next.
* @param languages
* @param language
* @param namespaces
*/
export function createI18nSettings({
languages,
language,
namespaces,
}: {
languages: string[];
language: string;
namespaces?: string | string[];
}): InitOptions {
const lng = language;
const ns = namespaces;
return {
supportedLngs: languages,
fallbackLng: languages[0],
detection: undefined,
showSupportNotice: false,
lng,
preload: false as const,
lowerCaseLng: true as const,
fallbackNS: ns,
missingInterpolationHandler: (text, value, options) => {
console.debug(
`Missing interpolation value for key: ${text}`,
value,
options,
);
},
ns,
react: {
useSuspense: true,
},
};
}

7
packages/i18n/src/default-locale.ts Normal file
View File

@@ -0,0 +1,7 @@
/**
* @name defaultLocale
* @description The default locale of the application.
* @type {string}
* @default 'en'
*/
export const defaultLocale = process.env.NEXT_PUBLIC_DEFAULT_LOCALE ?? 'en';

47
packages/i18n/src/i18n-provider.tsx
View File

@@ -1,47 +0,0 @@
'use client';
import type { InitOptions, i18n } from 'i18next';
import { initializeI18nClient } from './i18n.client';
let i18nInstance: i18n;
type Resolver = (
lang: string,
namespace: string,
) => Promise<Record<string, string>>;
export function I18nProvider({
settings,
children,
resolver,
}: React.PropsWithChildren<{
settings: InitOptions;
resolver: Resolver;
}>) {
useI18nClient(settings, resolver);
return children;
}
/**
* @name useI18nClient
* @description A hook that initializes the i18n client.
* @param settings
* @param resolver
*/
function useI18nClient(settings: InitOptions, resolver: Resolver) {
if (
!i18nInstance ||
i18nInstance.language !== settings.lng ||
i18nInstance.options.ns?.length !== settings.ns?.length
) {
throw loadI18nInstance(settings, resolver);
}
return i18nInstance;
}
async function loadI18nInstance(settings: InitOptions, resolver: Resolver) {
i18nInstance = await initializeI18nClient(settings, resolver);
}

90
packages/i18n/src/i18n.client.ts
View File

@@ -1,90 +0,0 @@
import i18next, { type InitOptions, i18n } from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import resourcesToBackend from 'i18next-resources-to-backend';
import { initReactI18next } from 'react-i18next';
// Keep track of the number of iterations
let iteration = 0;
// Maximum number of iterations
const MAX_ITERATIONS = 20;
/**
* Initialize the i18n instance on the client.
* @param settings - the i18n settings
* @param resolver - a function that resolves the i18n resources
*/
export async function initializeI18nClient(
settings: InitOptions,
resolver: (lang: string, namespace: string) => Promise<object>,
): Promise<i18n> {
const loadedLanguages: string[] = [];
const loadedNamespaces: string[] = [];
await i18next
.use(
resourcesToBackend(async (language, namespace, callback) => {
const data = await resolver(language, namespace);
if (!loadedLanguages.includes(language)) {
loadedLanguages.push(language);
}
if (!loadedNamespaces.includes(namespace)) {
loadedNamespaces.push(namespace);
}
return callback(null, data);
}),
)
.use(LanguageDetector)
.use(initReactI18next)
.init(
{
...settings,
showSupportNotice: false,
detection: {
order: ['cookie', 'htmlTag', 'navigator'],
caches: ['cookie'],
lookupCookie: 'lang',
cookieMinutes: 60 * 24 * 365, // 1 year
cookieOptions: {
sameSite: 'lax',
secure:
typeof window !== 'undefined' &&
window.location.protocol === 'https:',
path: '/',
},
},
interpolation: {
escapeValue: false,
},
},
(err) => {
if (err) {
console.error('Error initializing i18n client', err);
}
},
);
// to avoid infinite loops, we return the i18next instance after a certain number of iterations
// even if the languages and namespaces are not loaded
if (iteration >= MAX_ITERATIONS) {
console.debug(`Max iterations reached: ${MAX_ITERATIONS}`);
return i18next;
}
// keep component from rendering if no languages or namespaces are loaded
if (loadedLanguages.length === 0 || loadedNamespaces.length === 0) {
iteration++;
console.debug(
`Keeping component from rendering if no languages or namespaces are loaded. Iteration: ${iteration}. Will stop after ${MAX_ITERATIONS} iterations.`,
);
throw new Error('No languages or namespaces loaded');
}
return i18next;
}

151
packages/i18n/src/i18n.server.ts
View File

@@ -1,151 +0,0 @@
import { type InitOptions, createInstance } from 'i18next';
import resourcesToBackend from 'i18next-resources-to-backend';
import { initReactI18next } from 'react-i18next/initReactI18next';
/**
* Initialize the i18n instance on the server.
* This is useful for RSC and SSR.
* @param settings - the i18n settings
* @param resolver - a function that resolves the i18n resources
*/
export async function initializeServerI18n(
settings: InitOptions,
resolver: (language: string, namespace: string) => Promise<object>,
) {
const i18nInstance = createInstance();
const loadedNamespaces = new Set<string>();
await new Promise((resolve) => {
void i18nInstance
.use(
resourcesToBackend(async (language, namespace, callback) => {
try {
const data = await resolver(language, namespace);
loadedNamespaces.add(namespace);
return callback(null, data);
} catch (error) {
console.log(
`Error loading i18n file: locales/${language}/${namespace}.json`,
error,
);
return callback(null, {});
}
}),
)
.use({
type: '3rdParty',
init: async (i18next: typeof i18nInstance) => {
let iterations = 0;
const maxIterations = 100;
// do not bind this to the i18next instance until it's initialized
while (i18next.isInitializing) {
iterations++;
if (iterations > maxIterations) {
console.error(
`i18next is not initialized after ${maxIterations} iterations`,
);
break;
}
await new Promise((resolve) => setTimeout(resolve, 1));
}
initReactI18next.init(i18next);
resolve(i18next);
},
})
.init(settings);
});
const namespaces = settings.ns as string[];
// If all namespaces are already loaded, return the i18n instance
if (loadedNamespaces.size === namespaces.length) {
return i18nInstance;
}
// Otherwise, wait for all namespaces to be loaded
const maxWaitTime = 0.1; // 100 milliseconds
const checkIntervalMs = 5; // 5 milliseconds
async function waitForNamespaces() {
const startTime = Date.now();
while (Date.now() - startTime < maxWaitTime) {
const allNamespacesLoaded = namespaces.every((ns) =>
loadedNamespaces.has(ns),
);
if (allNamespacesLoaded) {
return true;
}
await new Promise((resolve) => setTimeout(resolve, checkIntervalMs));
}
return false;
}
const success = await waitForNamespaces();
if (!success) {
console.warn(
`Not all namespaces were loaded after ${maxWaitTime}ms. Initialization may be incomplete.`,
);
}
return i18nInstance;
}
/**
* Parse the accept-language header value and return the languages that are included in the accepted languages.
* @param languageHeaderValue
* @param acceptedLanguages
*/
export function parseAcceptLanguageHeader(
languageHeaderValue: string | null | undefined,
acceptedLanguages: string[],
): string[] {
// Return an empty array if the header value is not provided
if (!languageHeaderValue) return [];
const ignoreWildcard = true;
// Split the header value by comma and map each language to its quality value
return languageHeaderValue
.split(',')
.map((lang): [number, string] => {
const [locale, q = 'q=1'] = lang.split(';');
if (!locale) return [0, ''];
const trimmedLocale = locale.trim();
const numQ = Number(q.replace(/q ?=/, ''));
return [Number.isNaN(numQ) ? 0 : numQ, trimmedLocale];
})
.sort(([q1], [q2]) => q2 - q1) // Sort by quality value in descending order
.flatMap(([_, locale]) => {
// Ignore wildcard '*' if 'ignoreWildcard' is true
if (locale === '*' && ignoreWildcard) return [];
const languageSegment = locale.split('-')[0];
if (!languageSegment) return [];
// Return the locale if it's included in the accepted languages
try {
return acceptedLanguages.includes(languageSegment)
? [languageSegment]
: [];
} catch {
return [];
}
});
}

3
packages/i18n/src/index.ts
View File

@@ -1 +1,2 @@
export * from './create-i18n-settings';
// Export routing configuration as the main export
export * from './routing';

16
packages/i18n/src/locales.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { defaultLocale } from './default-locale';
/**
* @name locales
* @description Supported locales
* @type {string[]}
* @default [defaultLocale]
*/
export const locales: string[] = [
defaultLocale,
// Add other locales here as needed
// Example: 'es', 'fr', 'de', etc.
// Uncomment the locales below to enable them:
// 'es', // Spanish
// 'fr', // French
];

10
packages/i18n/src/navigation.ts Normal file
View File

@@ -0,0 +1,10 @@
import { createNavigation } from 'next-intl/navigation';
import { routing } from './routing';
/**
* Creates navigation utilities for next-intl.
* These utilities are locale-aware and automatically handle routing with locales.
*/
export const { Link, redirect, usePathname, useRouter, permanentRedirect } =
createNavigation(routing);

23
packages/i18n/src/routing.ts Normal file
View File

@@ -0,0 +1,23 @@
import { defineRouting } from 'next-intl/routing';
import { defaultLocale } from './default-locale';
import { locales } from './locales';
// Define the routing configuration for next-intl
export const routing = defineRouting({
// All supported locales
locales,
// Default locale (no prefix in URL)
defaultLocale,
// Default locale has no prefix, other locales do
// Example: /about (en), /es/about (es), /fr/about (fr)
localePrefix: 'as-needed',
// Enable automatic locale detection based on browser headers and cookies
localeDetection: true,
});
// Export locale types for TypeScript
export type Locale = (typeof routing.locales)[number];