Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEAAS] Nextjs Image for FEAAS #1754

Merged
merged 5 commits into from
Mar 13, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
// The BYOC bundle imports external (BYOC) components into the app and makes sure they are ready to be used
import BYOC from 'src/byoc';
import CdpPageView from 'components/CdpPageView';
import FEAASElementOverrides from 'components/FEAASElementOverrides';
import FEAASScripts from 'components/FEAASScripts';

const Scripts = (): JSX.Element => {
return (
<>
<BYOC />
<CdpPageView />
<FEAASElementOverrides />
<FEAASScripts />
</>
);
};

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import Image from 'next/image';
import * as FEAAS from '@sitecore-feaas/clientside/react';
import nextConfig from 'next.config';
// Element implementations for Sitecore Component Builder can be overriden here

const FEAASScripts = (): JSX.Element => {
// we cannot use nextjs's logic for remotePatterns matching without extra dependencies
// so we use a limited approach for now - which will be replaced once nextjs allows to fall back to unoptimized OOB
const shouldOptimize = (src: string) => {
if (src.startsWith('http')) {
const url = new URL(src);
const domains: string[] = nextConfig().images?.domains || [];
ambrauer marked this conversation as resolved.
Show resolved Hide resolved
return (
domains.some((domain) => url.hostname === domain) ||
url.hostname.match(/feaas\S*\.blob\.core\.windows\.net/)
);
}
return true;
};

// Register next Image to be used in Component Builder.
// Nextjs image implementation will be used when img is rendered in component from Component Builder
FEAAS.setElementImplementation('img', (attributes: Record<string, string>) => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { children, src, alt, ...imgAttributes } = attributes;
return (
<Image
height={1920}
width={1200}
unoptimized={!shouldOptimize(src)}
src={src}
alt={alt}
{...imgAttributes}
/>
);
});

return <></>;
};

export default FEAASScripts;
39 changes: 12 additions & 27 deletions packages/create-sitecore-jss/src/templates/nextjs/next.config.js
Original file line number Diff line number Diff line change
@@ -2,28 +2,6 @@ const jssConfig = require('./src/temp/config');
const plugins = require('./src/temp/next-config-plugins') || {};

const publicUrl = jssConfig.publicUrl;
// remotePatterns presets used for nextjs image optimization
// Less secure pattern can be used in development and editing
const remotePatternsDev = [
{
protocol: 'https',
hostname: '*',
port: '',
}
];
// More secure remotePatternsProd should be used when going live
const remotePatternsProd = [
{
protocol: 'https',
hostname: 'edge*.**',
port: '',
},
{
protocol: 'https',
hostname: 'feaas*.blob.core.windows.net',
port: '',
},
];

/**
* @type {import('next').NextConfig}
@@ -54,13 +32,20 @@ const nextConfig = {

// use this configuration to ensure that only images from the whitelisted domains
// can be served from the Next.js Image Optimization API
// uses remotePatterns presets out of the box
// see https://nextjs.org/docs/app/api-reference/components/image#remotepatterns
images: {
remotePatterns:
process.env.NODE_ENV === 'development' || process.env.SITECORE ?
remotePatternsDev :
remotePatternsProd
remotePatterns: [
{
protocol: 'https',
hostname: 'edge*.**',
port: '',
},
{
protocol: 'https',
hostname: 'feaas*.blob.core.windows.net',
port: '',
},
]
},

async rewrites() {