{"id":416144,"date":"2024-02-01T09:40:32","date_gmt":"2024-02-01T09:40:32","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=416144"},"modified":"2026-02-23T06:14:23","modified_gmt":"2026-02-23T06:14:23","slug":"how-to-create-a-multilingual-app-in-next-js","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/","title":{"rendered":"How to Create a Multilingual app in Next JS."},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"400\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/how-to-create-multilingual-app-in-next-js.png\" alt=\"how to create multilingual app in next blog Image\" class=\"wp-image-420150\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/how-to-create-multilingual-app-in-next-js.png 800w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/how-to-create-multilingual-app-in-next-js-300x150.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/how-to-create-multilingual-app-in-next-js-250x125.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/how-to-create-multilingual-app-in-next-js-768x384.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>In this blog, I will discuss about how to create a multilingual app using the next-i18next. <\/p>\n\n\n\n<p><code>next-i18next<\/code> enables i18n in Next.js, manages translations, and supports GetStaticProps and GetServerSideProps via built-in i18n routing.<\/p>\n\n\n\n<p>Before starting let&#8217;s set up the Next.js project:<\/p>\n\n\n\n<p>To set up the Next js project we can follow this\u00a0<a href=\"https:\/\/webkul.com\/blog\/project-setup-next-js\/\" target=\"_blank\" rel=\"noreferrer noopener\">setup next js project<\/a>\u00a0blog that covers all about the next js project setup.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Understanding i18n Routing in NextJs.<\/h2>\n\n\n\n<p>Next.js provides <a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/routing\/internationalization\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">built-in i18n<\/a> routing that automatically detects a user\u2019s locale and serves content in their preferred language.<\/p>\n\n\n\n<p>Locale Identifier has a like this.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>en-US &#8211; English as spoken in the United States<\/li>\n\n\n\n<li>hi-IN &#8211; Hindi as spoken in India<\/li>\n\n\n\n<li>nl-NL &#8211; Dutch as spoken in the Netherlands<\/li>\n\n\n\n<li>nl &#8211; Dutch, no specific region<\/li>\n<\/ul>\n\n\n\n<p>To implement i18n routes in Next.js, There are a few different approaches to define the i18n routes in NextJs.<\/p>\n\n\n\n<p><strong>Subpath-based Routing<\/strong><\/p>\n\n\n\n<p>In this approach, different language versions of the site are prefixed with language-specific subpaths in the URL. For instance:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\/hi\/blog &#8211; Routing for hi locale.<\/li>\n\n\n\n<li>\/nl-NL\/blog &#8211; routing for the nl-NL locale.<\/li>\n\n\n\n<li>\/hi-IN\/blog &#8211; routing for the hi-IN locale<\/li>\n<\/ul>\n\n\n\n<p><strong>Domain-based Routing<\/strong><\/p>\n\n\n\n<p>In this routing, Each language version of the site is hosted on its subdomain or domain:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>https:\/\/example.com\/home &#8211; English<\/li>\n\n\n\n<li>https:\/\/fr.example.com\/home &#8211; French<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Setting up the next-i18next package in a Next.js App<\/h2>\n\n\n\n<p><strong>Step 1: Install main npm libraries.<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.i18next.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">i18next<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/react.i18next.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">react-i18next<\/a><\/li>\n<\/ul>\n\n\n\n<p>Install the <a href=\"https:\/\/www.npmjs.com\/package\/next-i18next\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">next-i18next package<\/a> and its peer dependencies:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">npm install next-i18next react-i18next i18next<\/pre>\n\n\n\n<p>After Creating a new project and package installation then you can see the final folder structure.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">.\n\u251c\u2500\u2500 pages\/\n\u2502   \u251c\u2500\u2500 api\n\u2502         \u251c\u2500\u2500 hello.ts\n\u2502   \u251c\u2500\u2500 app.tsx\n|   \u251c\u2500\u2500_documet.tsx\n\u2502   \u2514\u2500\u2500 index.tsx\n\u251c\u2500\u2500 public\/\n\u2502   \u251c\u2500\u2500 favicon.ico\n\u2502   \u251c\u2500\u2500 next.svg\n\u2502   \u2514\u2500\u2500 vercel.svg\n\u251c\u2500\u2500 styles\/\n\u2502   \u2514\u2500\u2500 global.css\n\u2502   \u2514\u2500\u2500 Home.module.css\n\u251c\u2500\u2500 next.config.js\n\u251c\u2500\u2500 package-lock.json\n\u251c\u2500\u2500 package.json\n\u2514\u2500\u2500 README.md<\/pre>\n\n\n\n<p>now create the new file next-i18next.config.js in the root directory. and write the following code.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/-----------next-i18next.config.js-----------\/\/\n\n\/** @type {import(&#039;next-i18next&#039;).UserConfig} *\/\nmodule.exports = {\n  i18n: {\n    defaultLocale: &quot;en-US&quot;,\n    locales: &#091;&quot;en-US&quot;, &quot;ni-NL&quot;, &quot;hi-IN&quot;],\n  },\n};<\/pre>\n\n\n\n<p>It&#8217;s configuration file to tells next-i18next that what is your default locale and other locale.<\/p>\n\n\n\n<p><strong>Step 2: Configuration the next-i18next file.<\/strong><\/p>\n\n\n\n<p>Create a next.config.js file at the root of your project if you haven&#8217;t already,<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/----------next.config.js-----------\/\/\n\n\/** @type {import(&#039;next&#039;).NextConfig} *\/\n\nconst { i18n } = require(&quot;.\/next-i18next.config&quot;);\nconst nextConfig = {\n  reactStrictMode: true,\n  i18n,\n};\n\nmodule.exports = nextConfig;<\/pre>\n\n\n\n<p>Now open the _aap.tsx file and Import the appWithTranslation next-i18next component. This is a HOC component that wraps your App:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/---------_app.tsx----------\/\/\n\nimport &quot;@\/styles\/globals.css&quot;;\nimport { appWithTranslation } from &quot;next-i18next&quot;;\nimport type { AppProps } from &quot;next\/app&quot;;\nimport { UserConfig } from &quot;next-i18next&quot;;\nimport nextI18NextConfig from &quot;..\/next-i18next.config.js&quot;;\nimport Layout from &quot;@\/components\/layout&quot;;\n\nconst emptyInitialI18NextConfig: UserConfig = {\n  i18n: {\n    defaultLocale: nextI18NextConfig.i18n.defaultLocale,\n    locales: nextI18NextConfig.i18n.locales,\n  },\n};\nfunction App({ Component, pageProps }: AppProps) {\n  return (\n    &lt;Layout&gt;\n      &lt;Component {...pageProps} \/&gt;\n    &lt;\/Layout&gt;\n  );\n}\n\nexport default appWithTranslation(App, emptyInitialI18NextConfig);<\/pre>\n\n\n\n<p><strong>Step 3: Create translation localization files.<\/strong><\/p>\n\n\n\n<p>Create language-specific translation files within a public\/locales folder. For example:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">public\n\u2514\u2500\u2500 locales\n\u251c\u2500\u2500 en-Us\n\u2502 \u2514\u2500\u2500 common.json\n\u251c\u2500\u2500 ni-NL\n\u2502 \u2514\u2500\u2500 common.json\n\u2514\u2500\u2500 hi-IN\n\u2514\u2500\u2500 common.json<\/pre>\n\n\n\n<p>In each common.json file, define key-value pairs for the translations in respective languages:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/--------------en-US\/common.json---------\/\/\n\n{\n  &quot;Where does it come from?&quot;: &quot;Where does it come from?&quot;,\n  &quot;A Simple Example for Trasnslation&quot;:&quot;A Simple Example for Trasnslation&quot;,\n  &quot;Current localization language:&quot;:&quot;Current localization language:&quot;,\n  &quot;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&quot;: &quot;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&quot;\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/---------------ni-NL\/common.js---------------\/\/\n\n{\n  &quot;Where does it come from?&quot;: &quot;Waar komt het vandaan?&quot;,\n  &quot;Current localization language:&quot;: &quot;Huidige lokalisatietaal:&quot;,\n  &quot;A Simple Example for Trasnslation&quot;:&quot;Een eenvoudig voorbeeld voor vertaling&quot;,\n  &quot;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&quot;: &quot;Lorem Ipsum is slechts een proeftekst uit de druk- en zetterijbranche. Lorem Ipsum is de standaard proeftekst in de bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een galei met letters nam en deze door elkaar gooide om een \u200b\u200blettertype-specimenboek te maken. Het heeft niet alleen vijf eeuwen overleefd, maar ook de sprong naar elektronisch zetwerk, en is in wezen onveranderd gebleven. Het werd in de jaren zestig gepopulariseerd met de introductie van Letraset-bladen met Lorem Ipsum-passages, en meer recentelijk door desktop publishing-software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.&quot;\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/---------------hi-IN\/common.js-------------\/\/\n\n{\n  &quot;Where does it come from?&quot;: &quot;\u0915\u0939\u093e\u0901 \u0938\u0947 \u0906\u0924\u093e \u0939\u0948?&quot;,\n  &quot;A Simple Example for Trasnslation&quot;:&quot;\u0905\u0928\u0941\u0935\u093e\u0926 \u0915\u0947 \u0932\u093f\u090f \u090f\u0915 \u0938\u0930\u0932 \u0909\u0926\u093e\u0939\u0930\u0923&quot;,\n  &quot;Current localization language:&quot;: &quot;\u0935\u0930\u094d\u0924\u092e\u093e\u0928 \u0938\u094d\u0925\u093e\u0928\u0940\u092f\u0915\u0930\u0923 \u092d\u093e\u0937\u093e:&quot;,\n  &quot;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&quot;: &quot;\u0932\u094b\u0930\u0947\u092e \u0907\u092a\u094d\u0938\u092e \u0915\u0947\u0935\u0932 \u092e\u0941\u0926\u094d\u0930\u0923 \u0914\u0930 \u091f\u093e\u0907\u092a\u0938\u0947\u091f\u093f\u0902\u0917 \u0909\u0926\u094d\u092f\u094b\u0917 \u0915\u093e \u0928\u0915\u0932\u0940 \u092a\u093e\u0920 \u0939\u0948\u0964 \u0932\u094b\u0930\u0947\u092e \u0907\u092a\u094d\u0938\u092e 1500 \u0915\u0947 \u0926\u0936\u0915 \u0938\u0947 \u0939\u0940 \u0909\u0926\u094d\u092f\u094b\u0917 \u0915\u093e \u092e\u093e\u0928\u0915 \u0921\u092e\u0940 \u091f\u0947\u0915\u094d\u0938\u094d\u091f \u0930\u0939\u093e \u0939\u0948, \u091c\u092c \u090f\u0915 \u0905\u091c\u094d\u091e\u093e\u0924 \u092a\u094d\u0930\u093f\u0902\u091f\u0930 \u0928\u0947 \u090f\u0915 \u092a\u094d\u0930\u0915\u093e\u0930 \u0915\u0940 \u0917\u0948\u0932\u0940 \u0932\u0940 \u0914\u0930 \u0909\u0938\u0947 \u090f\u0915 \u092a\u094d\u0930\u0915\u093e\u0930 \u0915\u0940 \u0928\u092e\u0942\u0928\u093e \u092a\u0941\u0938\u094d\u0924\u0915 \u092c\u0928\u093e\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0924\u0948\u092f\u093e\u0930 \u0915\u093f\u092f\u093e\u0964 \u092f\u0939 \u0928 \u0915\u0947\u0935\u0932 \u092a\u093e\u0901\u091a \u0936\u0924\u093e\u092c\u094d\u0926\u093f\u092f\u094b\u0902 \u0924\u0915 \u091c\u0940\u0935\u093f\u0924 \u0930\u0939\u093e \u0939\u0948, \u092c\u0932\u094d\u0915\u093f \u0907\u0932\u0947\u0915\u094d\u091f\u094d\u0930\u0949\u0928\u093f\u0915 \u091f\u093e\u0907\u092a\u0938\u0947\u091f\u093f\u0902\u0917 \u092e\u0947\u0902 \u092d\u0940 \u091b\u0932\u093e\u0902\u0917 \u0932\u0917\u093e\u0924\u093e \u0930\u0939\u093e \u0939\u0948, \u092e\u0942\u0932\u0924\u0903 \u0905\u092a\u0930\u093f\u0935\u0930\u094d\u0924\u093f\u0924 \u0930\u0939\u093e \u0939\u0948\u0964 \u0907\u0938\u0947 1960 \u0915\u0947 \u0926\u0936\u0915 \u092e\u0947\u0902 \u0932\u094b\u0930\u0947\u092e \u0907\u092a\u094d\u0938\u092e \u0905\u0902\u0936\u094b\u0902 \u0935\u093e\u0932\u0947 \u0932\u0947\u091f\u094d\u0930\u093e\u0938\u0947\u091f \u0936\u0940\u091f \u0915\u0947 \u0930\u093f\u0932\u0940\u091c \u0915\u0947 \u0938\u093e\u0925 \u0932\u094b\u0915\u092a\u094d\u0930\u093f\u092f \u092c\u0928\u093e\u092f\u093e \u0917\u092f\u093e \u0925\u093e, \u0914\u0930 \u0939\u093e\u0932 \u0939\u0940 \u092e\u0947\u0902 \u0932\u094b\u0930\u0947\u092e \u0907\u092a\u094d\u0938\u092e \u0915\u0947 \u0938\u0902\u0938\u094d\u0915\u0930\u0923\u094b\u0902 \u0938\u0939\u093f\u0924 \u090f\u0932\u094d\u0921\u0938 \u092a\u0947\u091c\u092e\u0947\u0915\u0930 \u091c\u0948\u0938\u0947 \u0921\u0947\u0938\u094d\u0915\u091f\u0949\u092a \u092a\u094d\u0930\u0915\u093e\u0936\u0928 \u0938\u0949\u092b\u094d\u091f\u0935\u0947\u092f\u0930 \u0915\u0947 \u0938\u093e\u0925 \u0907\u0938\u0947 \u0932\u094b\u0915\u092a\u094d\u0930\u093f\u092f \u092c\u0928\u093e\u092f\u093e \u0917\u092f\u093e \u0925\u093e\u0964&quot;\n}<\/pre>\n\n\n\n<p><strong>Step 4: Translate content.<\/strong><\/p>\n\n\n\n<p>We&#8217;ll create the components folder in the Root directory and now create the header.tsx, footer.tsx, layout.tsx, and languageSwitcher.tsx file inside the components directory.<\/p>\n\n\n\n<p>Write the following Code.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/-----------components\/header.tsx----------\/\/\n\nconst Header = () =&gt; {\n  return (\n    &lt;header&gt;\n      &lt;div className=&quot;flex justify-center &quot;&gt;\n        &lt;h1 className=&quot;text-4xl font-bold py-3 px-6 text-slate-400 border-b border-solid border-slate-400&quot;&gt;\n          next-i18next\n        &lt;\/h1&gt;\n      &lt;\/div&gt;\n    &lt;\/header&gt;\n  );\n};\nexport default Header;<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/-----------components\/footer.tsx---------\/\/\n\nimport Link from &quot;next\/link&quot;;\nimport LanguageSwitcher from &quot;.\/languageSwitcher&quot;;\n\nconst Footer = () =&gt; {\n  const CURRENT_YEAR = new Date().getFullYear();\n  return (\n    &lt;footer className=&quot;bg-slate-100&quot;&gt;\n      &lt;div className=&quot;max-w-&#091;90vw] mx-auto py-5 flex flex-col gap-5&quot;&gt;\n        &lt;div className=&quot;flex justify-between&quot;&gt;\n          &lt;h1 className=&quot;text-3xl text-blue-500 font-bold&quot;&gt;Webkul&lt;\/h1&gt;\n          &lt;ul className=&quot;flex gap-4 items-center&quot;&gt;\n            &lt;LanguageSwitcher \/&gt;\n          &lt;\/ul&gt;\n        &lt;\/div&gt;\n        &lt;div&gt;\n          &lt;h4 className=&quot;text-center font-normal !text-gray-700&quot;&gt;\n            &amp;copy; {CURRENT_YEAR} made with multilingual app with\n            &lt;Link href=&quot;https:\/\/webkul.com\/&quot;&gt;&lt;\/Link&gt;\n          &lt;\/h4&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/footer&gt;\n  );\n};\nexport default Footer;<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/-----------components\/languageSwitcher.tsx---------\/\/\n\nimport Link from &quot;next\/link&quot;;\nimport { useRouter } from &quot;next\/router&quot;;\nconst LanguageSwitcher = () =&gt; {\n  const { locales, locale: currentLocale } = useRouter();\n  return (\n    &lt;ul className=&quot;flex gap-4 items-center&quot;&gt;\n      {locales?.map((locale) =&gt; (\n        &lt;li\n          key={locale}\n          className={`p-2 rounded border border-solid border-gray-300 ${\n            locale == currentLocale ? &quot;bg-blue-500 text-white&quot; : &quot;bg-white&quot;\n          }`}\n        &gt;\n          &lt;Link href=&quot;\/&quot; locale={locale}&gt;\n            &lt;button&gt;Change locale to {locale} &lt;\/button&gt;\n          &lt;\/Link&gt;\n        &lt;\/li&gt;\n      ))}\n    &lt;\/ul&gt;\n  );\n};\nexport default LanguageSwitcher;<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/---------------components\/layout.tsx-----------\/\/\n\nimport { ReactNode } from &quot;react&quot;;\nimport Footer from &quot;.\/footer&quot;;\nimport Header from &quot;.\/header&quot;;\n\nconst Layout = ({ children }: { children: ReactNode }) =&gt; {\n  return (\n    &lt;&gt;\n      &lt;Header \/&gt;\n      &lt;main&gt;{children}&lt;\/main&gt;\n      &lt;Footer \/&gt;\n    &lt;\/&gt;\n  );\n};\nexport default Layout;<\/pre>\n\n\n\n<p>Now We&#8217;ll create the index.tsx inside the pages directory basically index.tsx file already exists then no need to create the index.tsx file.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/------------pages\/index.tsx-----------\/\/\n\nimport { useRouter } from &quot;next\/router&quot;;\nimport { useTranslation } from &quot;next-i18next&quot;;\nimport { serverSideTranslations } from &quot;next-i18next\/serverSideTranslations&quot;;\nexport default function Home() {\n  const { locale } = useRouter();\n  const { t } = useTranslation(&quot;common&quot;);\n\n  return (\n    &lt;div className=&quot;max-w-&#091;90vw] min-h-&#091;65vh] mx-auto my-10&quot;&gt;\n      &lt;div className=&quot;flex flex-col gap-4&quot;&gt;\n        &lt;div className=&quot;&quot;&gt;\n          &lt;h1 className=&quot;text-3xl font-bold text-center&quot;&gt;\n            {t(&quot;A Simple Example for Trasnslation&quot;)}\n          &lt;\/h1&gt;\n          &lt;h3 className=&quot;text-2xl font-bold&quot;&gt;\n            Current localization language: {locale}\n          &lt;\/h3&gt;\n          &lt;p&gt;\n            {t(\n              &quot;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&quot;\n            )}\n          &lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;div className=&quot;flex flex-col gap-4&quot;&gt;\n          &lt;h3 className=&quot;text-2xl font-bold&quot;&gt;\n            {t(&quot;Where does it come from?&quot;)}\n          &lt;\/h3&gt;\n          &lt;p&gt;\n            {t(\n              &quot;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&quot;\n            )}\n          &lt;\/p&gt;\n          &lt;p&gt;\n            {t(\n              &quot;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&quot;\n            )}\n          &lt;\/p&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n}\nexport async function getStaticProps({ locale }: { locale: string }) {\n  return {\n    props: {\n      ...(await serverSideTranslations(locale, &#091;&quot;common&quot;])),\n    },\n  };\n}<\/pre>\n\n\n\n<p>Finally Ready the multilingual app and you can see the output for deafult locale on <a href=\"http:\/\/localhost:3000\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">http:\/\/localhost:3000\/<\/a> and switch the i18n route help of the language switcher.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"617\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/screenshot_1706684838964-1200x617.png\" alt=\"translation output for english langiage\" class=\"wp-image-419804\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/screenshot_1706684838964-1200x617.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/screenshot_1706684838964-300x154.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/screenshot_1706684838964-250x129.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/screenshot_1706684838964-768x395.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/screenshot_1706684838964.png 1528w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"617\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/screenshot_1706685737671-1200x617.png\" alt=\"translation output for dutch language\" class=\"wp-image-419812\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/screenshot_1706685737671-1200x617.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/screenshot_1706685737671-300x154.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/screenshot_1706685737671-250x129.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/screenshot_1706685737671-768x395.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/screenshot_1706685737671.png 1528w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"617\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/screenshot_1706685798782-1200x617.png\" alt=\"translation output for hindi language\" class=\"wp-image-419813\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/screenshot_1706685798782-1200x617.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/screenshot_1706685798782-300x154.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/screenshot_1706685798782-250x129.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/screenshot_1706685798782-768x395.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/01\/screenshot_1706685798782.png 1528w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Start your <a href=\"https:\/\/webkul.com\/headless-commerce-development-services\/\" target=\"_blank\" rel=\"noreferrer noopener\">Headless Development<\/a> with Webkul.<\/p>\n\n\n\n<p>Happy Coding!!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, I will discuss about how to create a multilingual app using the next-i18next. next-i18next enables i18n in Next.js, manages translations, and supports GetStaticProps and GetServerSideProps via built-in i18n routing. Before starting let&#8217;s set up the Next.js project: To set up the Next js project we can follow this\u00a0setup next js project\u00a0blog that <a href=\"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":545,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13575,6357],"tags":[15272,15273,15271,15269,6359],"class_list":["post-416144","post","type-post","status-publish","format-standard","hentry","category-next-js","category-react-js","tag-i18n-route","tag-internationalization","tag-multilingual-app","tag-next-js-2","tag-react-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to create a Multilingual app in NextJs.<\/title>\n<meta name=\"description\" content=\"In this blog, I will provide an overview here of how you can make a NextJs multilingual app using the next-i18next package.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create a Multilingual app in NextJs.\" \/>\n<meta property=\"og:description\" content=\"In this blog, I will provide an overview here of how you can make a NextJs multilingual app using the next-i18next package.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-01T09:40:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-23T06:14:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/02\/how-to-create-multilingual-app-in-next-js.png\" \/>\n<meta name=\"author\" content=\"Abhishek Kumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abhishek Kumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/\"},\"author\":{\"name\":\"Abhishek Kumar\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/9df44e99abf7df96a2c30b30fe20a4b9\"},\"headline\":\"How to Create a Multilingual app in Next JS.\",\"datePublished\":\"2024-02-01T09:40:32+00:00\",\"dateModified\":\"2026-02-23T06:14:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/\"},\"wordCount\":486,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/02\/how-to-create-multilingual-app-in-next-js.png\",\"keywords\":[\"i18n-route\",\"Internationalization\",\"multilingual-app\",\"next js\",\"react js\"],\"articleSection\":[\"next js\",\"react js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/\",\"name\":\"How to create a Multilingual app in NextJs.\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/02\/how-to-create-multilingual-app-in-next-js.png\",\"datePublished\":\"2024-02-01T09:40:32+00:00\",\"dateModified\":\"2026-02-23T06:14:23+00:00\",\"description\":\"In this blog, I will provide an overview here of how you can make a NextJs multilingual app using the next-i18next package.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/how-to-create-multilingual-app-in-next-js.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/how-to-create-multilingual-app-in-next-js.png\",\"width\":800,\"height\":400,\"caption\":\"how-to-create-multilingual-app-in-next-js\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a Multilingual app in Next JS.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/9df44e99abf7df96a2c30b30fe20a4b9\",\"name\":\"Abhishek Kumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5dab3b6807a6aa05fa5ad733392108c9f4ca765e4051f2e20687e10133f461e5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5dab3b6807a6aa05fa5ad733392108c9f4ca765e4051f2e20687e10133f461e5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Abhishek Kumar\"},\"description\":\"Abhishek Kumar, a skilled software engineer, specializes in crafting immersive digital experiences. With a focus on frontend development, he excels in creating headless themes . Proficient in JavaScript and next.js, Abhishek's expertise adds a unique and dynamic dimension to any project, ensuring a seamless and engaging user journey.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/abhishekkumar-mg121\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create a Multilingual app in NextJs.","description":"In this blog, I will provide an overview here of how you can make a NextJs multilingual app using the next-i18next package.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/","og_locale":"en_US","og_type":"article","og_title":"How to create a Multilingual app in NextJs.","og_description":"In this blog, I will provide an overview here of how you can make a NextJs multilingual app using the next-i18next package.","og_url":"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2024-02-01T09:40:32+00:00","article_modified_time":"2026-02-23T06:14:23+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/02\/how-to-create-multilingual-app-in-next-js.png","type":"","width":"","height":""}],"author":"Abhishek Kumar","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Abhishek Kumar","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/"},"author":{"name":"Abhishek Kumar","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/9df44e99abf7df96a2c30b30fe20a4b9"},"headline":"How to Create a Multilingual app in Next JS.","datePublished":"2024-02-01T09:40:32+00:00","dateModified":"2026-02-23T06:14:23+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/"},"wordCount":486,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/02\/how-to-create-multilingual-app-in-next-js.png","keywords":["i18n-route","Internationalization","multilingual-app","next js","react js"],"articleSection":["next js","react js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/","url":"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/","name":"How to create a Multilingual app in NextJs.","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/02\/how-to-create-multilingual-app-in-next-js.png","datePublished":"2024-02-01T09:40:32+00:00","dateModified":"2026-02-23T06:14:23+00:00","description":"In this blog, I will provide an overview here of how you can make a NextJs multilingual app using the next-i18next package.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/how-to-create-multilingual-app-in-next-js.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/02\/how-to-create-multilingual-app-in-next-js.png","width":800,"height":400,"caption":"how-to-create-multilingual-app-in-next-js"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-create-a-multilingual-app-in-next-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create a Multilingual app in Next JS."}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/9df44e99abf7df96a2c30b30fe20a4b9","name":"Abhishek Kumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5dab3b6807a6aa05fa5ad733392108c9f4ca765e4051f2e20687e10133f461e5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dab3b6807a6aa05fa5ad733392108c9f4ca765e4051f2e20687e10133f461e5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Abhishek Kumar"},"description":"Abhishek Kumar, a skilled software engineer, specializes in crafting immersive digital experiences. With a focus on frontend development, he excels in creating headless themes . Proficient in JavaScript and next.js, Abhishek's expertise adds a unique and dynamic dimension to any project, ensuring a seamless and engaging user journey.","url":"https:\/\/webkul.com\/blog\/author\/abhishekkumar-mg121\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/416144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/545"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=416144"}],"version-history":[{"count":78,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/416144\/revisions"}],"predecessor-version":[{"id":527521,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/416144\/revisions\/527521"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=416144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=416144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=416144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}