Typed get server side props

.changeset/eight-ways-drum.md

@@ -0,0 +1,5 @@
+---
+'web-app': minor
+---
+
+Example with typed getServerSideProps

.changeset/many-monkeys-shout.md

@@ -0,0 +1,5 @@
+---
+'web-app': minor
+---
+
+Refactor app structure and configs

apps/web-app/src/core/i18n/i18n-namespaces.type.ts

@@ -0,0 +1,3 @@
+import { CustomTypeOptions } from 'react-i18next';
+
+export type I18nNamespaces = (keyof CustomTypeOptions['resources'])[];

apps/web-app/src/features/demo/sections/demo-api.section.tsx → apps/web-app/src/features/demo/blocks/demo-api.block.tsx

@@ -21,7 +21,7 @@ const PoemGridWithReactQueryAndKy: React.FC<NoChildrenProps> = () => {
   return <>{data && <PoemList poems={data} />}</>;
 };
 
-export const DemoApiSection: React.FC<NoChildrenProps> = () => {
+export const DemoApiBlock: React.FC<NoChildrenProps> = () => {
   return (
     <div>
       <div className="lg:container lg:mx-auto">

apps/web-app/src/features/demo/demo.config.ts

@@ -1,5 +1,9 @@
-import { FeaturesConfig } from '@/config/features.config';
+import { I18nNamespaces } from '@/core/i18n/i18n-namespaces.type';
 
-export const demoConfig: FeaturesConfig = {
+export type DemoConfig = {
+  i18nNamespaces: Readonly<I18nNamespaces>;
+};
+
+export const demoConfig: DemoConfig = {
   i18nNamespaces: ['common', 'demo'],
 } as const;

apps/web-app/src/features/demo/demo.page.tsx → apps/web-app/src/features/demo/pages/demo.page.tsx

@@ -2,12 +2,12 @@ import { NextSeo } from 'next-seo';
 import { MainLayout } from '@/components/layout/main-layout';
 import { Banner } from '@/components/banner';
 import { useTranslation } from 'next-i18next';
-import { demoConfig } from './demo.config';
+import { demoConfig } from '../demo.config';
 import { sayHello } from '@your-org/core-lib';
 import { InfoCard } from '@your-org/ui-lib/component/info-card';
 import { AsyncMessage, Message } from '@your-org/ui-lib';
 import Image from 'next/image';
-import { DemoApiSection } from './sections/demo-api.section';
+import { DemoApiBlock } from '../blocks/demo-api.block';
 
 type Props = {
   children?: never;
@@ -41,7 +41,7 @@ export const DemoPage: React.FC<Props> = () => {
           width={400}
           height={240}
         />
-        <DemoApiSection />
+        <DemoApiBlock />
       </MainLayout>
     </>
   );

apps/web-app/src/features/home/sections/cta-section.tsx → apps/web-app/src/features/home/blocks/cta-block.tsx

@@ -1,7 +1,7 @@
 type Props = {
   children?: never;
 };
-export const CTASection: React.FC<Props> = () => {
+export const CtaBlock: React.FC<Props> = () => {
   return (
     <div className="bg-gray-50">
       <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">

apps/web-app/src/features/home/sections/features-section.tsx → apps/web-app/src/features/home/blocks/features-block.tsx

@@ -47,7 +47,7 @@ const Ctn = styled.div`
   );
 `;
 
-export const FeaturesSection: React.FC<Props> = () => {
+export const FeaturesBlock: React.FC<Props> = () => {
   return (
     <Ctn>
       <div className="py-12 bg-white" style={{ width: '100%' }}>

apps/web-app/src/features/home/sections/hero-section.tsx → apps/web-app/src/features/home/blocks/hero-block.tsx

@@ -15,7 +15,7 @@ const navigation = [
   { name: 'Company', href: '#' },
 ];
 
-export const HeroSection: React.FC<Props> = () => {
+export const HeroBlock: React.FC<Props> = () => {
   const { t } = useTranslation(['home', 'common']);
 
   return (

apps/web-app/src/features/home/home.config.ts

@@ -1,6 +1,9 @@
-import { FeaturesConfig } from '@/config/features.config';
+import { I18nNamespaces } from '@/core/i18n/i18n-namespaces.type';
 
-export const homeConfig: FeaturesConfig = {
+export type HomeConfig = {
+  i18nNamespaces: Readonly<I18nNamespaces>;
+};
+export const homeConfig: HomeConfig = {
   /** Namespaces that should be loaded for this page */
   i18nNamespaces: ['common', 'home'],
 } as const;

apps/web-app/src/features/home/home.page.tsx → apps/web-app/src/features/home/pages/home.page.tsx

@@ -1,11 +1,11 @@
 import { NextSeo } from 'next-seo';
 import { MainLayout } from '@/components/layout/main-layout';
 import { Banner } from '@/components/banner';
-import { HeroSection } from './sections/hero-section';
-import { FeaturesSection } from './sections/features-section';
-import { CTASection } from './sections/cta-section';
+import { HeroBlock } from '../blocks/hero-block';
+import { FeaturesBlock } from '../blocks/features-block';
+import { CtaBlock } from '../blocks/cta-block';
 import { useTranslation } from 'next-i18next';
-import { homeConfig } from './home.config';
+import { homeConfig } from '../home.config';
 
 type Props = {
   children?: never;
@@ -22,9 +22,9 @@ export const HomePage: React.FC<Props> = () => {
       />
       <MainLayout>
         <Banner />
-        <HeroSection />
-        <FeaturesSection />
-        <CTASection />
+        <HeroBlock />
+        <FeaturesBlock />
+        <CtaBlock />
       </MainLayout>
     </>
   );

apps/web-app/src/pages/demo.tsx

@@ -1,22 +1,31 @@
-import { GetServerSideProps } from 'next';
+import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { BadRequest } from '@tsed/exceptions';
-import { DemoPage } from '../features/demo/demo.page';
-import { demoConfig } from '../features/demo/demo.config';
+import { DemoPage } from '@/features/demo/pages/demo.page';
+import { demoConfig } from '@/features/demo/demo.config';
 
-export default function DemoRoute() {
+type Props = {
+  /** Add HomeRoute props here */
+};
+
+export default function DemoRoute(
+  props: InferGetServerSidePropsType<typeof getServerSideProps>
+) {
   return <DemoPage />;
 }
 
-export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
+export const getServerSideProps: GetServerSideProps<Props> = async (
+  context
+) => {
+  const { locale } = context;
   if (locale === undefined) {
     throw new BadRequest('locale is missing');
   }
   const { i18nNamespaces } = demoConfig;
   return {
     props: {
-      // @see https:/github.com/i18next/react-i18next/pull/1340#issuecomment-874728587
-      ...(await serverSideTranslations(locale, i18nNamespaces?.slice())),
+      // i18nNamespaces.slice() is needed here to get rid off readonly
+      ...(await serverSideTranslations(locale, i18nNamespaces.slice())),
     },
   };
 };

apps/web-app/src/pages/home.tsx

@@ -1,21 +1,31 @@
-import { GetServerSideProps } from 'next';
-import { HomePage } from '../features/home/home.page';
+import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
+import { HomePage } from '@/features/home/pages/home.page';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { BadRequest } from '@tsed/exceptions';
-import { homeConfig } from '../features/home/home.config';
+import { homeConfig } from '@/features/home/home.config';
 
-export default function HomeRoute() {
+type Props = {
+  /** Add HomeRoute props here */
+};
+
+export default function HomeRoute(
+  props: InferGetServerSidePropsType<typeof getServerSideProps>
+) {
   return <HomePage />;
 }
 
-export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
+export const getServerSideProps: GetServerSideProps<Props> = async (
+  context
+) => {
+  const { locale } = context;
   if (locale === undefined) {
     throw new BadRequest('locale is missing');
   }
   const { i18nNamespaces } = homeConfig;
   return {
     props: {
-      ...(await serverSideTranslations(locale, i18nNamespaces?.slice())),
+      // i18nNamespaces.slice() is needed here to get rid off readonly
+      ...(await serverSideTranslations(locale, i18nNamespaces.slice())),
     },
   };
 };

apps/web-app/tsconfig.json

@@ -10,6 +10,7 @@
     "paths": {
       "@/test-utils": ["../config/jest/test-utils"],
       "@/config/*": ["./config/*"],
+      "@/core/*": ["./core/*"],
       "@/components/*": ["./components/*"],
       "@/backend/*": ["./backend/*"],
       "@/features/*": ["./features/*"],