0

I am creating a Sitecore Headless application using NextJs and trying to fetch the dictionary value but unable to do so. Below is the dictionary Item which I have created in Sitecore.

enter image description here

And Below is the code snippet which i am using.

import React, { useEffect, useState } from 'react';
import { dictionaryServiceFactory } from 'lib/dictionary-service-factory';
import {
  Item,
  Field,
  ComponentParams,
  ComponentRendering,
} from '@sitecore-jss/sitecore-jss-nextjs';

interface Fields {
  Title: Field<string>;
  Description: Field<string>;
  Products: Item[];
  Author: Field<string>;
}

type MultiListProps = {
  rendering: ComponentRendering & { params: ComponentParams };
  params: { [key: string]: string };
  fields: Fields;
  index: number;
  children: JSX.Element;
};

const Default = (props: MultiListProps): JSX.Element => {
  const siteName = 'Headless';
  const dictionaryService = dictionaryServiceFactory.create(siteName);
  const [headingValue, setGallerydValue] = useState<string | null>(null);
  useEffect(() => {
    dictionaryService.fetchDictionaryData('en').then(data => {
      console.log("Fetched data:", data); // Log the fetched data
      if (data && data.Heading) {
        setGallerydValue(data.Heading);
      }
    });
  }, []);

  return (
    <div className="cards">
      <div className="component-title">
      <h1>{headingValue}</h1>
      </div>
    </div>
  );
};

export default Default;

I am getting null value on webpage. Can anyone help me in this?

3 Answers 3

2

Here is the link, that needs to be followed to get a dictionary using Sitecore Next.js.

On the Next.js component, you need to import next-localization as below

import { useI18n } from 'next-localization';

const {t} = useI18n() || {};

<p>Translated text: {t('custom-key')}</p>

2

Make sure the 'Dictionary Domain' is added in the app settings tag of the specific site config.

Refer:

 <app name="oneweb"
        layoutServiceConfiguration="sxa-jss"
        sitecorePath="/sitecore/content/Headless/oneweb"
        useLanguageSpecificLayout="true"
        dictionaryDomain="{3E599B9D-79AC-4D2E-BF4C-399736F8B94F}"
        graphQLEndpoint="/sitecore/api/graph/edge"
        inherits="defaults"
        serverSideRenderingEngine="http"
        serverSideRenderingEngineEndpointUrl="http://localhost:3000/api/editing/render"
        serverSideRenderingEngineApplicationUrl="http://localhost:3000"
    />

Snapshot: enter image description here

1
  • HI. Kindly add the code with your answer in case of image for SEO purposes. Dec 4, 2023 at 10:01
1
  1. Go to lib/dictionary-service-factory.
  2. Make sure your DictionaryServiceFactory class looks like this:
export class DictionaryServiceFactory {
  /**
   * @param {string} siteName site name
   * @returns {DictionaryService} service instance
   */
  create(siteName: string): DictionaryService {
    return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL
      ? new GraphQLDictionaryService({
          endpoint: config.graphQLEndpoint,
          apiKey: config.sitecoreApiKey,
          siteName: config.jssAppName,
          jssAppTemplateId: '{9ED66404-64C9-4122-90E1-869CB3CEA566}',
          rootItemId: '{your-site-id-from-sitecore}',
        })
      : new RestDictionaryService({
          apiHost: config.sitecoreApiHost,
          apiKey: config.sitecoreApiKey,
          siteName,
        });
  }
}
  1. Update the rootItemId will be the Item ID of your site.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.