├── .eslintrc.json ├── app ├── i18n │ ├── locales │ │ ├── en │ │ │ ├── footer.json │ │ │ ├── second-page.json │ │ │ ├── translation.json │ │ │ └── client-page.json │ │ └── de │ │ │ ├── footer.json │ │ │ ├── second-page.json │ │ │ ├── translation.json │ │ │ └── client-page.json │ ├── settings.js │ ├── client.js │ └── index.js ├── [lng] │ ├── components │ │ └── Footer │ │ │ ├── index.js │ │ │ ├── client.js │ │ │ └── FooterBase.jsx │ ├── second-page │ │ └── page.jsx │ ├── layout.jsx │ ├── page.jsx │ └── client-page │ │ └── page.jsx ├── head.jsx ├── globals.css └── page.module.css ├── public ├── favicon.ico └── vercel.svg ├── .vscode └── settings.json ├── next.config.js ├── pages └── api │ └── hello.js ├── .gitpod.yml ├── .gitignore ├── package.json ├── middleware.js └── README.md /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /app/i18n/locales/en/footer.json: -------------------------------------------------------------------------------- 1 | { 2 | "languageSwitcher": "Switch from <1>{{lng}} to: " 3 | } -------------------------------------------------------------------------------- /app/i18n/locales/de/footer.json: -------------------------------------------------------------------------------- 1 | { 2 | "languageSwitcher": "Wechseln von <1>{{lng}} nach: " 3 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anilkk/nextjs-13-i18next-demo-project/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /app/i18n/locales/en/second-page.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Hi from second page!", 3 | "back-to-home": "Back to home" 4 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "i18n-ally.localesPaths": [ 3 | "app/i18n", 4 | "app/i18n/locales" 5 | ] 6 | } -------------------------------------------------------------------------------- /app/i18n/locales/de/second-page.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Hallo von der zweiten Seite!", 3 | "back-to-home": "Zurück zur Hauptseite" 4 | } -------------------------------------------------------------------------------- /app/i18n/locales/en/translation.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Hi there!", 3 | "to-second-page": "To second page", 4 | "to-client-page": "To client page" 5 | } -------------------------------------------------------------------------------- /app/i18n/locales/de/translation.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Hallo Leute!", 3 | "to-second-page": "Zur zweiten Seite", 4 | "to-client-page": "Zur clientseitigen Seite" 5 | } -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | experimental: { 4 | appDir: true, 5 | }, 6 | } 7 | 8 | module.exports = nextConfig 9 | -------------------------------------------------------------------------------- /pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /app/i18n/locales/en/client-page.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Client page", 3 | "counter_one": "one selected", 4 | "counter_other": "{{count}} selected", 5 | "counter_zero": "none selected", 6 | "back-to-home": "Back to home" 7 | } -------------------------------------------------------------------------------- /app/i18n/locales/de/client-page.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Client Seite", 3 | "counter_one": "eines ausgewählt", 4 | "counter_other": "{{count}} ausgewählt", 5 | "counter_zero": "keines ausgewählt", 6 | "back-to-home": "Zurück zur Hauptseite" 7 | } -------------------------------------------------------------------------------- /app/[lng]/components/Footer/index.js: -------------------------------------------------------------------------------- 1 | import { useTranslation } from '../../../i18n' 2 | import { FooterBase } from './FooterBase' 3 | 4 | export const Footer = async ({ lng }) => { 5 | const { t } = await useTranslation(lng, 'footer') 6 | return 7 | } -------------------------------------------------------------------------------- /app/[lng]/components/Footer/client.js: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { FooterBase } from './FooterBase' 4 | import { useTranslation } from '../../../i18n/client' 5 | 6 | export const Footer = ({ lng }) => { 7 | const { t } = useTranslation(lng, 'footer') 8 | return 9 | } -------------------------------------------------------------------------------- /app/head.jsx: -------------------------------------------------------------------------------- 1 | export default function Head() { 2 | return ( 3 | <> 4 | Create Next App 5 | 6 | 7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /.gitpod.yml: -------------------------------------------------------------------------------- 1 | # This configuration file was automatically generated by Gitpod. 2 | # Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file) 3 | # and commit this file to your remote git repository to share the goodness with others. 4 | 5 | tasks: 6 | - init: npm install && npm run build 7 | command: npm run start 8 | 9 | 10 | -------------------------------------------------------------------------------- /app/i18n/settings.js: -------------------------------------------------------------------------------- 1 | export const fallbackLng = 'en' 2 | export const languages = [fallbackLng, 'de'] 3 | export const defaultNS = 'translation' 4 | 5 | export function getOptions (lng = fallbackLng, ns = defaultNS) { 6 | return { 7 | // debug: true, 8 | supportedLngs: languages, 9 | fallbackLng, 10 | lng, 11 | fallbackNS: defaultNS, 12 | defaultNS, 13 | ns 14 | } 15 | } -------------------------------------------------------------------------------- /app/[lng]/second-page/page.jsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | import { useTranslation } from '../../i18n' 3 | import { Footer } from '../components/Footer' 4 | 5 | export default async function Page({ params: { lng } }) { 6 | const { t } = await useTranslation(lng, 'second-page') 7 | return ( 8 | <> 9 |

{t('title')}

10 | 11 | {t('back-to-home')} 12 | 13 |