feat(frontend): Add i18n without routing

apps/frontend/src/app/[locale]/(main)/page.tsx → apps/frontend/src/app/(main)/page.tsx

@@ -1,5 +1,3 @@
-// ! DO NOT TOUCH THIS FILE!!! IT IS GENERATED BY VITNODE-CLI
-
 import React from 'react';
 import {
   DefaultPage,
@@ -13,7 +11,7 @@ export default function Page(props: DefaultPageProps) {
   return (
     <DefaultPage
       pathToDefaultPage={async plugin =>
-        import(`../../../plugins/${plugin}/templates/default-page`)
+        import(`@/plugins/${plugin}/templates/default-page`)
       }
       {...props}
     />

apps/frontend/src/app/layout.tsx

@@ -1,7 +1,14 @@
-export default async function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return children;
+import { GeistSans } from 'geist/font/sans';
+import {
+  generateMetadataRootLayout,
+  RootLayout,
+  RootLayoutProps,
+} from 'vitnode-frontend/views/layout/root-layout';
+
+import './global.css';
+
+export const generateMetadata = generateMetadataRootLayout;
+
+export default function Layout(props: RootLayoutProps) {
+  return <RootLayout className={GeistSans.className} {...props} />;
 }

apps/frontend/src/i18n.ts

@@ -1,9 +1,11 @@
 import { getRequestConfig } from 'next-intl/server';
 import { i18nConfig } from 'vitnode-frontend/i18n';
 
-export default getRequestConfig(async args => {
+export default getRequestConfig(async () => {
+  const locale = 'en';
+
   const config = await i18nConfig({
-    ...args,
+    locale,
     pathsToMessagesFromPlugins: async ({ plugin, locale }) => {
       return import(`./plugins/${plugin}/langs/${locale}.json`);
     },

apps/frontend/src/middleware.ts

@@ -1,7 +1,3 @@
 import createMiddleware from 'vitnode-frontend/middleware';
 
-export default createMiddleware();
-
-export const config = {
-  matcher: '/((?!_next/static|_next/image|robots.txt|sitemap.xml|sitemap).*)',
-};
+export default createMiddleware({});

packages/create-vitnode-app/templates/with-i18n-routing/apps/frontend/src/i18n.ts

@@ -0,0 +1,13 @@
+import { getRequestConfig } from 'next-intl/server';
+import { i18nConfig } from 'vitnode-frontend/i18n';
+
+export default getRequestConfig(async ({ locale }) => {
+  const config = await i18nConfig({
+    locale,
+    pathsToMessagesFromPlugins: async ({ plugin, locale }) => {
+      return import(`./plugins/${plugin}/langs/${locale}.json`);
+    },
+  });
+
+  return config;
+});

packages/create-vitnode-app/templates/with-i18n-routing/apps/frontend/src/middleware.ts

@@ -0,0 +1,9 @@
+import createMiddleware from 'vitnode-frontend/middleware';
+
+export default createMiddleware({
+  isLocalePathRoute: true,
+});
+
+export const config = {
+  matcher: '/((?!_next/static|_next/image|robots.txt|sitemap.xml|sitemap).*)',
+};

packages/create-vitnode-app/templates/without-i18n-routing/apps/frontend/src/middleware.ts

@@ -0,0 +1,3 @@
+import createMiddleware from 'vitnode-frontend/middleware';
+
+export default createMiddleware({});

packages/frontend/next.config.ts

@@ -7,7 +7,7 @@ dotenv.config({
   path: join(process.cwd(), '..', '..', '.env'),
 });
 
-const withNextIntl = createNextIntlPlugin();
+const withNextIntl = createNextIntlPlugin('./src/i18n.ts');
 
 const nextConfig = (config: NextConfig): NextConfig => {
   const ENVS = {

packages/frontend/src/hooks/core/sign/in/mutation-api.ts

@@ -6,7 +6,7 @@ import {
   Core_Sessions__Sign_InMutation,
   Core_Sessions__Sign_InMutationVariables,
 } from '@/graphql/mutations/sessions/core_sessions__sign_in.generated';
-import { redirect } from '@/navigation';
+
 import { revalidatePath } from 'next/cache';
 
 export const mutationApi = async (
@@ -27,5 +27,4 @@ export const mutationApi = async (
   }
 
   revalidatePath(variables.admin ? '/admin' : '/', 'layout');
-  redirect(variables.admin ? '/admin/core/dashboard' : '/');
 };

packages/frontend/src/hooks/core/sign/in/use-sign-in-admin-view.ts

@@ -2,9 +2,11 @@ import React from 'react';
 import * as z from 'zod';
 
 import { mutationApi } from './mutation-api';
+import { useRouter } from '@/navigation';
 
 export const useSignInAdminView = () => {
   const [error, setError] = React.useState<string>('');
+  const { push } = useRouter();
 
   const formSchema = z.object({
     email: z.string().min(1),
@@ -16,7 +18,11 @@ export const useSignInAdminView = () => {
     const mutation = await mutationApi({ ...values, admin: true });
     if (mutation?.error) {
       setError(mutation.error);
+
+      return;
     }
+
+    push('/admin/core/dashboard');
   };
 
   return {

packages/frontend/src/hooks/core/sign/in/use-sign-in-view.ts

@@ -2,9 +2,11 @@ import React from 'react';
 import * as z from 'zod';
 
 import { mutationApi } from './mutation-api';
+import { useRouter } from '@/navigation';
 
 export const useSignInView = () => {
   const [error, setError] = React.useState('');
+  const { push } = useRouter();
 
   const formSchema = z.object({
     email: z.string().email().default(''),
@@ -17,7 +19,11 @@ export const useSignInView = () => {
     const mutation = await mutationApi(values);
     if (mutation?.error) {
       setError(mutation.error);
+
+      return;
     }
+
+    push('/');
   };
 
   return {

packages/frontend/src/hooks/core/sign/out/mutation-api.ts

@@ -6,7 +6,6 @@ import {
   Core_Sessions__Sign_OutMutation,
   Core_Sessions__Sign_OutMutationVariables,
 } from '@/graphql/mutations/sessions/core_sessions__sign_out.generated';
-import { redirect } from '@/navigation';
 import { revalidatePath } from 'next/cache';
 
 export const mutationApi = async () => {
@@ -24,5 +23,4 @@ export const mutationApi = async () => {
   }
 
   revalidatePath('/', 'page');
-  redirect('/');
 };

packages/frontend/src/i18n.ts

@@ -1,4 +1,3 @@
-import { notFound } from 'next/navigation';
 import { IntlConfig } from 'next-intl';
 
 import { fetcher } from './graphql/fetcher';
@@ -20,7 +19,7 @@ export const i18nConfig = async ({
     locale: string;
     plugin: string;
   }) => Promise<{ default: unknown }>;
-}): Promise<Omit<IntlConfig, 'locale'>> => {
+}): Promise<IntlConfig> => {
   let plugins: string[] = [];
   try {
     const {
@@ -33,7 +32,7 @@ export const i18nConfig = async ({
     });
 
     if (!languages.find(lang => lang.code === locale)) {
-      notFound();
+      plugins = ['core', 'admin'];
     }
 
     plugins = pluginsFromServer;
@@ -58,6 +57,7 @@ export const i18nConfig = async ({
   );
 
   return {
+    locale,
     messages: {
       ...messagesFormApps.reduce(
         (acc, messages) => ({ ...acc, ...messages }),

packages/frontend/src/middleware.ts

@@ -7,6 +7,8 @@ import {
   Core_Middleware__ShowQuery,
   Core_Middleware__ShowQueryVariables,
 } from './graphql/queries/core_middleware__show.generated';
+import { join } from 'path';
+import { existsSync } from 'fs';
 
 const getI18n = async () => {
   try {
@@ -55,11 +57,14 @@ const removeLocaleFromUrl = (urlPath: string, locales: string[]): string => {
   return `/${parts.join('/')}`;
 };
 
-export default function createMiddleware() {
+export default function createMiddleware({
+  isLocalePathRoute,
+}: {
+  isLocalePathRoute?: boolean;
+}) {
   return async function middleware(request: NextRequest) {
     const i18n = await getI18n();
-    const handleI18nRouting = createIntlMiddleware(i18n);
-    const response = handleI18nRouting(request);
+
     const pathname = removeLocaleFromUrl(
       request.nextUrl.pathname,
       i18n.locales,
@@ -94,6 +99,11 @@ export default function createMiddleware() {
       return NextResponse.redirect(new URL('/admin', request.url));
     }
 
-    return response;
+    if (isLocalePathRoute) {
+      const handleI18nRouting = createIntlMiddleware(i18n);
+      const response = handleI18nRouting(request);
+
+      return response;
+    }
   };
 }

packages/frontend/src/views/layout/root-layout.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from 'next';
 import { NextIntlClientProvider } from 'next-intl';
-import { getMessages } from 'next-intl/server';
+import { getLocale, getMessages } from 'next-intl/server';
 import React from 'react';
 
 import { getGlobalData } from '../../graphql/get-global-data';
@@ -19,8 +19,13 @@ interface Props extends RootLayoutProps {
 }
 
 export const generateMetadataRootLayout = async ({
-  params: { locale },
+  params: { locale: localeFromParams },
 }: RootLayoutProps): Promise<Metadata> => {
+  let locale = localeFromParams;
+  if (!locale) {
+    locale = await getLocale();
+  }
+
   const metadata: Metadata = {
     manifest: `${CONFIG.backend_public_url}/assets/${locale}/manifest.webmanifest`,
     icons: {
@@ -51,9 +56,14 @@ export const generateMetadataRootLayout = async ({
 
 export const RootLayout = async ({
   children,
-  params: { locale },
+  params: { locale: localeFromParams },
   className,
 }: Props) => {
+  let locale = localeFromParams;
+  if (!locale) {
+    locale = await getLocale();
+  }
+
   const messages = await getMessages({ locale });
 
   try {