Next.js Multilingual Site with Storyblok

Creating a blog using Next.js with Storyblok for a multilingual site with dynamic slugs and internationalization (i18n) is a fantastic topic! Below is a comprehensive guide for your blog. Make sure to tailor the details according to your preferences and project requirements.

Introduction

Begin your blog by introducing the need for multilingual websites and how dynamic slugs and i18n can enhance user experience. Mention that you’ll be using Next.js for the frontend and Storyblok as the content management system.

Prerequisites

Outline the tools and technologies readers need to have installed before starting the project:

1. Node.js and npm: Ensure readers have Node.js and npm installed on their machines.bash

# Install Node.js and npm https://nodejs.org/

Next.js: Guide readers on installing Next.js globally.

bash

# Install Next.js globally npm install -g next

Storyblok account: Encourage readers to sign up for a Storyblok account.

bash

1. # Storyblok website https://www.storyblok.com/

Project Setup

Walk through the steps to set up a new Next.js project and integrate Storyblok:

1. Create a Next.js App:bash

npx create-next-app my-multilang-blog cd my-multilang-blog

Install Storyblok Connector:

Integrate Storyblok into your Next.js app.

bash

1. npm install storyblok-js-client

Implementing Dynamic Slugs

Guide readers on creating dynamic routes using Next.js and Storyblok. This involves:

1. Define Dynamic Page:Create a dynamic page template that fetches content based on the slug.jsx

// pages/[slug].js

import { getStory } from '../utils/storyblok';

export async function getStaticPaths() {
  // Fetch available slugs from Storyblok
  const slugs = await fetchSlugsFromStoryblok();
  
  return {
    paths: slugs.map((slug) => ({ params: { slug } })),
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  // Fetch content based on the slug
  const story = await getStory(params.slug);

  return {
    props: {
      story,
    },
  };
}

function BlogPost({ story }) {
  // Render your blog post using Storyblok content
}

export default BlogPost;

2. Fetch Data from Storyblok:

Create utility functions (getStory and fetchSlugsFromStoryblok) to fetch data from Storyblok.

// utils/storyblok.js

import Storyblok from 'storyblok-js-client';

const storyblok = new Storyblok({
  accessToken: 'YOUR_ACCESS_TOKEN',
});

export async function getStory(slug) {
  // Fetch a single story from Storyblok
  const { data } = await storyblok.get(`cdn/stories/${slug}`);

  return data.story;
}

export async function fetchSlugsFromStoryblok() {
  // Fetch all slugs from Storyblok
  const { data } = await storyblok.get('cdn/links');

  return data.links.map((link) => link.slug);
}

Internationalization (i18n)

Explain how to implement internationalization in your Next.js app using the next-i18next library:

1. Install next-i18next:bash

npm install next-i18next

Configure i18n:

Set up next.config.js for i18n configuration.

// next.config.js

const { i18n } = require('./next-i18next.config');

module.exports = {
  i18n,
};

Translate Content:

In your Storyblok space, create separate entries for each language and use the i18n field for translations.

{ "content": { "_uid": "example-post", "component": "blog-post", "title": { "en": "Hello World!", "fr": "Bonjour le Monde!", "es": "Hola Mundo!" }, // other fields... } }

Implement i18n in Pages:

Modify your dynamic page template to support multiple languages.

// pages/[slug].js

import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

export async function getStaticProps({ params, locale }) {
  const story = await getStory(params.slug);

  return {
    props: {
      story,
      ...await serverSideTranslations(locale, ['common']),
    },
  };
}

Conclusion

Summarize the key points and highlight the importance of dynamic slugs and internationalization in creating a robust multilingual blog with Next.js and Storyblok. Encourage readers to experiment with additional features and share their experiences.