@prezly/theme-kit-nextjs 1.6.2 → 1.6.4-0

package/build/infinite-loading/useInfiniteStoriesLoading.js

@@ -0,0 +1,116 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInfiniteStoriesLoading = void 0;
+var react_1 = require("react");
+var newsroom_context_1 = require("../newsroom-context");
+var useInfiniteLoading_1 = require("./useInfiniteLoading");
+function fetchStories(page, pageSize, category, locale, include) {
+    return __awaiter(this, void 0, void 0, function () {
+        var result, message;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, fetch('/api/fetch-stories', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(__assign({ page: page, pageSize: pageSize, category: category, include: include }, (locale && {
+                            localeCode: locale.toUnderscoreCode(),
+                        }))),
+                    })];
+                case 1:
+                    result = _a.sent();
+                    if (!!result.ok) return [3 /*break*/, 3];
+                    return [4 /*yield*/, result.json()];
+                case 2:
+                    message = (_a.sent()).message;
+                    throw new Error(message);
+                case 3: return [2 /*return*/, result.json()];
+            }
+        });
+    });
+}
+/**
+ * NOTE: This hook depends on the presence of a Next API route (/api/fetch-stories)!
+ * The handler for this route is exported from `apiHandlers/fetchStories.ts` file.
+ * See https://github.com/prezly/theme-nextjs-bea/blob/d381e9878187ca98815d240d3ffdf10a75993c14/pages/index.tsx#L24 for usage example
+ */
+function useInfiniteStoriesLoading(initialStories, pagination, category, include) {
+    var _this = this;
+    var currentLocale = (0, newsroom_context_1.useCurrentLocale)();
+    var _a = (0, useInfiniteLoading_1.useInfiniteLoading)({
+        fetchingFn: function (nextPage, pageSize) { return __awaiter(_this, void 0, void 0, function () {
+            var stories;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, fetchStories(nextPage, pageSize, category, currentLocale, include)];
+                    case 1:
+                        stories = (_a.sent()).stories;
+                        return [2 /*return*/, stories];
+                }
+            });
+        }); },
+        initialData: initialStories,
+        pagination: pagination,
+    }), canLoadMore = _a.canLoadMore, data = _a.data, isLoading = _a.isLoading, loadMore = _a.loadMore, resetData = _a.resetData;
+    (0, react_1.useEffect)(function () {
+        if (category === null || category === void 0 ? void 0 : category.id) {
+            resetData();
+        }
+    }, [category === null || category === void 0 ? void 0 : category.id, resetData]);
+    return {
+        canLoadMore: canLoadMore,
+        isLoading: isLoading,
+        loadMoreStories: loadMore,
+        stories: data,
+    };
+}
+exports.useInfiniteStoriesLoading = useInfiniteStoriesLoading;
+//# sourceMappingURL=useInfiniteStoriesLoading.js.map

package/build/infinite-loading/useInfiniteStoriesLoading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInfiniteStoriesLoading.js","sourceRoot":"","sources":["../../src/infinite-loading/useInfiniteStoriesLoading.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,+BAAkC;AAGlC,wDAAuD;AAGvD,2DAA0D;AAE1D,SAAe,YAAY,CACvB,IAAY,EACZ,QAAgB,EAChB,QAAmB,EACnB,MAAqB,EACrB,OAAoC;;;;;wBAErB,qBAAM,KAAK,CAAC,oBAAoB,EAAE;wBAC7C,MAAM,EAAE,MAAM;wBACd,OAAO,EAAE;4BACL,cAAc,EAAE,kBAAkB;yBACrC;wBACD,IAAI,EAAE,IAAI,CAAC,SAAS,YAChB,IAAI,MAAA,EACJ,QAAQ,UAAA,EACR,QAAQ,UAAA,EACR,OAAO,SAAA,IACJ,CAAC,MAAM,IAAI;4BACV,UAAU,EAAE,MAAM,CAAC,gBAAgB,EAAE;yBACxC,CAAC,EACJ;qBACL,CAAC,EAAA;;oBAdI,MAAM,GAAG,SAcb;yBAEE,CAAC,MAAM,CAAC,EAAE,EAAV,wBAAU;oBACU,qBAAM,MAAM,CAAC,IAAI,EAAE,EAAA;;oBAA/B,OAAO,GAAK,CAAA,SAAmB,CAAA,QAAxB;oBACf,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC;wBAG7B,sBAAO,MAAM,CAAC,IAAI,EAAE,EAAC;;;;CACxB;AAED;;;;GAIG;AACH,SAAgB,yBAAyB,CACrC,cAAmB,EACnB,UAA2B,EAC3B,QAAmB,EACnB,OAAoC;IAJxC,iBAmCC;IA7BG,IAAM,aAAa,GAAG,IAAA,mCAAgB,GAAE,CAAC;IAEnC,IAAA,KAAwD,IAAA,uCAAkB,EAAI;QAChF,UAAU,EAAE,UAAO,QAAQ,EAAE,QAAQ;;;;4BACb,qBAAM,YAAY,CAClC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,OAAO,CACV,EAAA;;wBANO,OAAO,GAAK,CAAA,SAMnB,CAAA,QANc;wBAOf,sBAAO,OAAO,EAAC;;;aAClB;QACD,WAAW,EAAE,cAAc;QAC3B,UAAU,YAAA;KACb,CAAC,EAbM,WAAW,iBAAA,EAAE,IAAI,UAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAavD,CAAC;IAEH,IAAA,iBAAS,EAAC;QACN,IAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,EAAE,EAAE;YACd,SAAS,EAAE,CAAC;SACf;IACL,CAAC,EAAE,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC;IAE9B,OAAO;QACH,WAAW,aAAA;QACX,SAAS,WAAA;QACT,eAAe,EAAE,QAAQ;QACzB,OAAO,EAAE,IAAI;KAChB,CAAC;AACN,CAAC;AAnCD,8DAmCC"}

package/build/intl/locale.js

@@ -84,12 +84,13 @@ function getSupportedLocaleIsoCode(locale) {
 }
 exports.getSupportedLocaleIsoCode = getSupportedLocaleIsoCode;
 function getRedirectToCanonicalLocale(shortestLocaleCode, nextLocaleIsoCode, redirectPath, query) {
+    // No need to redirect if no particular locale was requested by the application
+    if (!nextLocaleIsoCode || nextLocaleIsoCode === exports.DUMMY_DEFAULT_LOCALE) {
+        return undefined;
+    }
     var shortestLocaleSlug = shortestLocaleCode
         ? localeObject_1.LocaleObject.fromAnyCode(shortestLocaleCode).toUrlSlug()
         : shortestLocaleCode;
-    if (nextLocaleIsoCode === exports.DUMMY_DEFAULT_LOCALE) {
-        return undefined;
-    }
     if (shortestLocaleSlug !== nextLocaleIsoCode) {
         var prefixedPath = redirectPath && !redirectPath.startsWith('/') ? "/".concat(redirectPath) : redirectPath;
         var urlQuery = query ? "?".concat((0, querystring_1.stringify)(query)) : '';

package/build/intl/locale.js.map

@@ -1 +1 @@
-{"version":3,"file":"locale.js","sourceRoot":"","sources":["../../src/intl/locale.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"locale.js","sourceRoot":"","sources":["../../src/intl/locale.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prezly/theme-kit-nextjs",
-  "version": "1.6.2",
+  "version": "1.6.4-0",
   "description": "Data layer and utility library for developing Prezly themes with NextJS",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -48,8 +48,11 @@
     "react-dom": "^17.x"
   },
   "dependencies": {
-    "@prezly/sdk": "^6.11.0",
-    "parse-data-url": "^4.0.1"
+    "@prezly/sdk": "^6.21.0",
+    "@react-hookz/web": "^13.2.1",
+    "next-seo": "^5.4.0",
+    "parse-data-url": "^4.0.1",
+    "string-strip-html": "^9.1.9"
   },
   "devDependencies": {
     "@prezly/eslint-config": "^4.0.0",

package/src/adapter-nextjs/processRequest.ts

@@ -22,7 +22,9 @@ export function processRequest<Props>(
 
     const { localeResolved, ...pageProps } = props;
 
-    if (!localeResolved) {
+    // If no locale was provided by Next, it most likely means that the theme is not supporting multi-language.
+    // In that case we won't show 404 page.
+    if (!localeResolved && nextLocale) {
         return { notFound: true };
     }
 

package/src/components-nextjs/PageSeo/PageSeo.tsx

@@ -0,0 +1,123 @@
+import { NextSeo } from 'next-seo';
+import type { NextSeoProps } from 'next-seo';
+import { useRouter } from 'next/router';
+import { useMemo } from 'react';
+import { stripHtml } from 'string-strip-html';
+
+import { getNewsroomLogoUrl, getUsedLanguages } from '../../data-fetching';
+import { LocaleObject } from '../../intl';
+import {
+    useCompanyInformation,
+    useCurrentLocale,
+    useCurrentStory,
+    useGetLinkLocaleSlug,
+    useGetTranslationUrl,
+    useLanguages,
+    useNewsroom,
+} from '../../newsroom-context';
+
+import { getAbsoluteUrl } from './lib/getAbsoluteUrl';
+import type { AlternateLanguageLink } from './lib/types';
+
+type Props = NextSeoProps & {
+    imageUrl?: string;
+};
+
+/**
+ * This component provides base page attributes for every Newsroom page.
+ * It depends on information from NewsroomContext, so the component should be placed inside the `NewsroomContextProvider`.
+ * You can pass additional props expected by NextSeo component to override any info that is provided by the NewsroomContext.
+ */
+export function PageSeo({
+    title,
+    description,
+    imageUrl,
+    canonical,
+    openGraph,
+    twitter,
+    ...nextSeoProps
+}: Props) {
+    const companyInformation = useCompanyInformation();
+    const newsroom = useNewsroom();
+    const currentLocale = useCurrentLocale();
+    const languages = useLanguages();
+    const getTranslationUrl = useGetTranslationUrl();
+    const getLinkLocaleSlug = useGetLinkLocaleSlug();
+    const currentStory = useCurrentStory();
+    const { asPath } = useRouter();
+
+    const pageTitle = title || companyInformation.name;
+    const pageDescription = description || stripHtml(companyInformation.about).result;
+    const canonicalUrl =
+        canonical || getAbsoluteUrl(asPath, newsroom.url, getLinkLocaleSlug(currentLocale));
+    const siteName = companyInformation.name;
+    const logoUrl = imageUrl || getNewsroomLogoUrl(newsroom);
+
+    const alternateLanguageLinks: AlternateLanguageLink[] = useMemo(() => {
+        if (!languages.length) {
+            return [];
+        }
+
+        const alternateLanguages = getUsedLanguages(languages).filter(
+            (language) => language.code !== currentLocale.toUnderscoreCode(),
+        );
+
+        return alternateLanguages
+            .map((language) => {
+                const locale = LocaleObject.fromAnyCode(language.code);
+
+                const translationLink = getTranslationUrl(locale, true);
+
+                if (!translationLink) {
+                    return undefined;
+                }
+
+                return {
+                    hrefLang: locale.toHyphenCode(),
+                    href: getAbsoluteUrl(
+                        translationLink,
+                        newsroom.url,
+                        currentStory && translationLink !== '/' ? false : getLinkLocaleSlug(locale),
+                    ),
+                };
+            })
+            .filter<AlternateLanguageLink>(Boolean as any);
+    }, [
+        currentLocale,
+        getLinkLocaleSlug,
+        getTranslationUrl,
+        languages,
+        newsroom.url,
+        currentStory,
+    ]);
+
+    return (
+        <NextSeo
+            title={pageTitle}
+            description={pageDescription}
+            canonical={canonicalUrl}
+            openGraph={{
+                url: canonicalUrl,
+                title: pageTitle,
+                description: pageDescription,
+                locale: currentLocale.toUnderscoreCode(),
+                images: [
+                    {
+                        url: logoUrl,
+                        alt: pageTitle,
+                    },
+                ],
+                site_name: siteName,
+                ...openGraph,
+            }}
+            twitter={{
+                site: siteName,
+                cardType: 'summary',
+                ...twitter,
+            }}
+            additionalMetaTags={[{ name: 'twitter:image', content: logoUrl }]}
+            languageAlternates={alternateLanguageLinks}
+            {...nextSeoProps}
+        />
+    );
+}

package/src/components-nextjs/PageSeo/index.ts

@@ -0,0 +1,2 @@
+export { PageSeo } from './PageSeo';
+export * from './lib/types';

package/src/components-nextjs/PageSeo/lib/getAbsoluteUrl.ts

@@ -0,0 +1,7 @@
+// Returns absolute URL based on the path and without any query parameters
+export function getAbsoluteUrl(path: string, origin: string, localeCode?: string | false): string {
+    const url = new URL(`${localeCode ? `/${localeCode}` : ''}${path || '/'}`, origin);
+    url.search = '';
+
+    return url.toString();
+}

package/src/components-nextjs/PageSeo/lib/types.ts

@@ -0,0 +1,4 @@
+export type AlternateLanguageLink = {
+    href: string;
+    hrefLang: string;
+};

package/src/components-nextjs/Sitemap/SitemapBuilder.ts

@@ -0,0 +1,56 @@
+import type { SitemapUrl } from './types';
+
+export class SitemapBuilder {
+    private baseUrl: string;
+
+    private urls: SitemapUrl[] = [];
+
+    constructor(baseUrl: string) {
+        this.baseUrl = baseUrl;
+    }
+
+    public addUrl(location: string) {
+        this.urls.push({
+            location: this.baseUrl + location,
+            changeFrequency: SitemapBuilder.guessFrequency(location),
+            priority: SitemapBuilder.guessPriority(location),
+        });
+    }
+
+    private static guessFrequency(location: string) {
+        if (location === '/') return 'daily';
+
+        return 'weekly';
+    }
+
+    private static guessPriority(location: string) {
+        if (location === '/') return '0.9';
+
+        if (location.startsWith('/category/')) {
+            return '0.8';
+        }
+
+        return '0.7';
+    }
+
+    static serializeLocation(url: SitemapUrl) {
+        return [
+            '<url>',
+            url.location && `\t<loc>${url.location}</loc>`,
+            url.changeFrequency && `\t<changefreq>${url.changeFrequency}</changefreq>`,
+            url.priority && `\t<priority>${url.priority}</priority>`,
+            '</url>',
+        ]
+            .filter(Boolean)
+            .join('\n');
+    }
+
+    serialize() {
+        return [
+            '<?xml version="1.0" encoding="UTF-8" ?>',
+            '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">',
+            this.urls.map(SitemapBuilder.serializeLocation).join('\n'),
+            '</urlset>',
+        ].join('\n');
+    }
+}

package/src/components-nextjs/Sitemap/createPaths.ts

@@ -0,0 +1,21 @@
+import type { Category, Story } from '@prezly/sdk';
+
+export function createPaths(stories: Story[], categories: Category[]) {
+    const storiesUrls = stories.map(({ slug }) => `/${slug}`);
+    const categoriesUrls = categories
+        .map((category) => {
+            const translations = Object.values(category.i18n);
+            const allSlugs = translations
+                .map(({ slug }) => slug || '')
+                .filter(Boolean)
+                .reduce<string[]>(
+                    (slugs, slug) => (slugs.includes(slug) ? [...slugs] : [...slugs, slug]),
+                    [],
+                );
+
+            return allSlugs.map((slug) => `/category/${slug}`);
+        })
+        .flat();
+
+    return [...storiesUrls, ...categoriesUrls];
+}

package/src/components-nextjs/Sitemap/getInitialProps.ts

@@ -0,0 +1,37 @@
+import type { NextPageContext } from 'next';
+
+import { getPrezlyApi } from '../../data-fetching';
+
+import { createPaths } from './createPaths';
+import { SitemapBuilder } from './SitemapBuilder';
+
+export async function getInitialProps(ctx: NextPageContext, additionalPaths?: string[]) {
+    const { res, req } = ctx;
+
+    if (!req || !res) {
+        // client side
+        return null;
+    }
+
+    const baseUrl = req.headers.host || '/';
+
+    const api = getPrezlyApi(req);
+    const stories = await api.getAllStories();
+    const categories = await api.getCategories();
+
+    const paths = createPaths(stories, categories);
+    const sitemapBuilder = new SitemapBuilder(baseUrl);
+
+    sitemapBuilder.addUrl('/');
+    paths.forEach((path) => sitemapBuilder.addUrl(path));
+
+    if (additionalPaths) {
+        additionalPaths.forEach((path) => sitemapBuilder.addUrl(path));
+    }
+
+    res.setHeader('Content-Type', 'text/xml');
+    res.write(sitemapBuilder.serialize());
+    res.end();
+
+    return null;
+}

package/src/components-nextjs/Sitemap/index.ts

@@ -0,0 +1,5 @@
+export { getInitialProps as getSitemapInitialProps } from './getInitialProps';
+
+export { SitemapBuilder } from './SitemapBuilder';
+export { createPaths } from './createPaths';
+export * from './types';

package/src/components-nextjs/Sitemap/types.ts

@@ -0,0 +1,5 @@
+export type SitemapUrl = {
+    location: string;
+    changeFrequency?: string;
+    priority?: string;
+};

package/src/components-nextjs/StorySeo/StorySeo.tsx

@@ -0,0 +1,68 @@
+import type { ExtendedStory } from '@prezly/sdk';
+import { ArticleJsonLd, NextSeo } from 'next-seo';
+
+type Props = {
+    story: ExtendedStory;
+};
+
+/**
+ * This components provides additional page attributes for the Story page.
+ * It works in conjunction with `PageSeo` component, overidding some of its attributes.
+ */
+export function StorySeo({ story }: Props) {
+    const { title, subtitle, published_at, updated_at, author, oembed, newsroom, summary } = story;
+
+    const authorName = author?.display_name || author?.email || 'Unknown';
+    const description = subtitle || summary;
+
+    return (
+        <>
+            <NextSeo
+                title={title}
+                description={description}
+                canonical={oembed.url}
+                openGraph={{
+                    title,
+                    description,
+                    url: oembed.url,
+                    site_name: newsroom.display_name,
+                    type: 'article',
+                    article: {
+                        publishedTime: published_at || undefined,
+                        modifiedTime: updated_at,
+                        authors: [authorName],
+                    },
+                    ...(oembed.thumbnail_url && {
+                        images: [
+                            {
+                                url: oembed.thumbnail_url,
+                                alt: oembed.title,
+                                width: oembed.thumbnail_width,
+                                height: oembed.thumbnail_height,
+                            },
+                        ],
+                    }),
+                }}
+                additionalMetaTags={
+                    oembed.thumbnail_url
+                        ? [
+                              { name: 'twitter:card', content: 'summary_large_image' },
+                              { name: 'twitter:image', content: oembed.thumbnail_url },
+                          ]
+                        : undefined
+                }
+            />
+            <ArticleJsonLd
+                url={oembed.url}
+                title={title}
+                images={oembed.thumbnail_url ? [oembed.thumbnail_url] : []}
+                datePublished={published_at || ''}
+                dateModified={updated_at}
+                authorName={[authorName]}
+                publisherName={newsroom.display_name}
+                publisherLogo={newsroom.thumbnail_url}
+                description={description}
+            />
+        </>
+    );
+}

package/src/components-nextjs/StorySeo/index.ts

@@ -0,0 +1 @@
+export { StorySeo } from './StorySeo';

package/src/components-nextjs/index.ts

@@ -0,0 +1,3 @@
+export { PageSeo } from './PageSeo';
+export * from './Sitemap';
+export { StorySeo } from './StorySeo';

package/src/data-fetching/lib/getEnvVariables.ts

@@ -27,7 +27,9 @@ function decodeHttpEnv(header: string): Record<string, any> {
     return decodeJson(header);
 }
 
-export function getEnvVariables(req?: IncomingMessage): PrezlyEnv {
+export function getEnvVariables<EnvType extends PrezlyEnv = PrezlyEnv>(
+    req?: IncomingMessage,
+): NodeJS.ProcessEnv & EnvType {
     if (typeof window !== 'undefined') {
         throw new Error('"getEnvVariables" should only be used on back-end side.');
     }
@@ -37,8 +39,8 @@ export function getEnvVariables(req?: IncomingMessage): PrezlyEnv {
     if (headerName && req) {
         const header = req.headers[headerName] as string | undefined;
         const httpEnv = decodeHttpEnv(header || '');
-        return { ...process.env, ...httpEnv };
+        return { ...process.env, ...httpEnv } as NodeJS.ProcessEnv & EnvType;
     }
 
-    return { ...process.env };
+    return { ...process.env } as NodeJS.ProcessEnv & EnvType;
 }

package/src/index.ts

@@ -1,5 +1,7 @@
 export * from './adapter-nextjs';
+export * from './components-nextjs';
 export * from './data-fetching';
+export * from './infinite-loading';
 export * from './intl';
 export * from './newsroom-context';
 export * from './types';

package/src/infinite-loading/apiHandlers/fetchGalleries.ts

@@ -0,0 +1,24 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { getPrezlyApi } from '../../data-fetching';
+
+export async function fetchGalleries(req: NextApiRequest, res: NextApiResponse) {
+    if (req.method !== 'POST') {
+        res.status(405);
+        return;
+    }
+
+    const { page, pageSize } = req.body;
+
+    try {
+        const api = getPrezlyApi(req);
+
+        const { galleries } = await api.getGalleries({ page, pageSize });
+
+        res.status(200).json({ galleries });
+    } catch (error) {
+        res.status(500).send({
+            message: (error as Error).message,
+        });
+    }
+}

package/src/infinite-loading/apiHandlers/fetchStories.ts

@@ -0,0 +1,26 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { getPrezlyApi } from '../../data-fetching';
+
+export async function fetchStories(req: NextApiRequest, res: NextApiResponse) {
+    if (req.method !== 'POST') {
+        res.status(405);
+        return;
+    }
+
+    const { page, pageSize, category, include, localeCode } = req.body;
+
+    try {
+        const api = getPrezlyApi(req);
+
+        const { stories } = await (category
+            ? api.getStoriesFromCategory(category, { page, pageSize, include, localeCode })
+            : api.getStories({ page, pageSize, include, localeCode }));
+
+        res.status(200).json({ stories });
+    } catch (error) {
+        res.status(500).send({
+            message: (error as Error).message,
+        });
+    }
+}

package/src/infinite-loading/apiHandlers/index.ts

@@ -0,0 +1,2 @@
+export { fetchGalleries } from './fetchGalleries';
+export { fetchStories } from './fetchStories';

package/src/infinite-loading/index.ts

@@ -0,0 +1,5 @@
+export { useInfiniteLoading } from './useInfiniteLoading';
+export { useInfiniteStoriesLoading } from './useInfiniteStoriesLoading';
+export { useInfiniteGalleriesLoading } from './useInfiniteGalleriesLoading';
+export * from './apiHandlers';
+export * from './types';

package/src/infinite-loading/types.ts

@@ -0,0 +1,5 @@
+export interface PaginationProps {
+    itemsTotal: number;
+    currentPage: number;
+    pageSize: number;
+}