chore(examples): localization example (#10134)

examples/localization/.env.example

@@ -0,0 +1,20 @@
+# Database connection string
+DATABASE_URI=mongodb://127.0.0.1/payload-template-website
+
+# Used to encrypt JWT tokens
+PAYLOAD_SECRET=YOUR_SECRET_HERE
+
+# Used to format links and URLs
+PAYLOAD_PUBLIC_SERVER_URL=http://localhost:3000
+NEXT_PUBLIC_SERVER_URL=http://localhost:3000
+
+# Allow robots to index the site (optional)
+NEXT_PUBLIC_IS_LIVE=
+
+# Used to preview drafts
+PAYLOAD_PUBLIC_DRAFT_SECRET=demo-draft-secret
+NEXT_PRIVATE_DRAFT_SECRET=demo-draft-secret
+
+# Used to revalidate static pages
+REVALIDATION_KEY=demo-revalation-key
+NEXT_PRIVATE_REVALIDATION_KEY=demo-revalation-key

examples/localization/.eslintignore

@@ -0,0 +1,12 @@
+.tmp
+**/.git
+**/.hg
+**/.pnp.*
+**/.svn
+**/.yarn/**
+**/build
+**/dist/**
+**/node_modules
+**/temp
+playwright.config.ts
+jest.config.js

examples/localization/.eslintrc.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  extends: 'next',
+  root: true,
+  parserOptions: {
+    project: ['./tsconfig.json'],
+    tsconfigRootDir: __dirname,
+  },
+}

examples/localization/.gitignore

@@ -0,0 +1,10 @@
+build
+dist / media
+node_modules
+.DS_Store
+.env
+.next
+.vercel
+
+# Payload default media upload directory
+public/media/

examples/localization/.prettierignore

@@ -0,0 +1,14 @@
+**/payload-types.ts
+.tmp
+**/.git
+**/.hg
+**/.pnp.*
+**/.svn
+**/.yarn/**
+**/build
+**/dist/**
+**/node_modules
+**/temp
+**/docs/**
+tsconfig.json
+

examples/localization/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "semi": false
+}

examples/localization/.vscode/launch.json

@@ -0,0 +1,14 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "yarn dev",
+      "name": "Debug Website",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

examples/localization/Dockerfile

@@ -0,0 +1,24 @@
+FROM node:18.8-alpine as base
+
+FROM base as builder
+
+WORKDIR /home/node/app
+COPY package*.json ./
+
+COPY . .
+RUN yarn install
+RUN yarn build
+
+FROM base as runtime
+
+ENV NODE_ENV=production
+
+WORKDIR /home/node/app
+COPY package*.json  ./
+COPY yarn.lock ./
+
+RUN yarn install --production
+
+EXPOSE 3000
+
+CMD ["node", "dist/server.js"]

examples/localization/README.md

@@ -0,0 +1,32 @@
+# Payload Localization Example (i18n)
+
+This example is built based on an old version of the website template.
+
+The objective is to show how to implement localization in a website. There is no guarantee that it will be kept up to date with the website template or the latest Payload enhancements.
+
+To facilitate the localization process, this example uses the next-intl library.
+
+## Setup
+
+1. `cp .env.example .env` (copy the .env.example file to .env)
+2. `pnpm install` (`pnpm i --ignore-workspaces` if you are running from the monorepo)
+3. `pnpm run dev`
+4. Seed your database in the admin panel (see below)
+
+## Seed
+
+To seed the database with a few pages, posts, and projects you can click the 'seed database' link from the admin panel.
+
+The seed script will also create a demo user for demonstration purposes only:
+
+- Demo Author
+  - Email: `demo-author@payloadcms.com`
+  - Password: `password`
+
+> NOTICE: seeding the database is destructive because it drops your current database to populate a fresh one from the seed template. Only run this command if you are starting a new project or can afford to lose your current data.
+
+## Important!
+
+The seed script only creates translations in English and Spanish, so you will not see the website translated to other languages even if you see them in the dropdown menu.
+
+You can translate documents to other languages from the admin panel.

examples/localization/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/app/(frontend)/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/utilities"
+  }
+}

examples/localization/docker-compose.yml

@@ -0,0 +1,31 @@
+version: '3'
+
+services:
+  payload:
+    image: node:18-alpine
+    ports:
+      - '3000:3000'
+    volumes:
+      - .:/home/node/app
+      - node_modules:/home/node/app/node_modules
+    working_dir: /home/node/app/
+    command: sh -c "yarn install && yarn dev"
+    depends_on:
+      - mongo
+    env_file:
+      - .env
+
+  mongo:
+    image: mongo:latest
+    ports:
+      - '27017:27017'
+    command:
+      - --storageEngine=wiredTiger
+    volumes:
+      - data:/data/db
+    logging:
+      driver: none
+
+volumes:
+  data:
+  node_modules:

examples/localization/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

examples/localization/next.config.js

@@ -0,0 +1,28 @@
+import { withPayload } from '@payloadcms/next/withPayload'
+import createNextIntlPlugin from 'next-intl/plugin'
+
+const withNextIntl = createNextIntlPlugin()
+
+import redirects from './redirects.js'
+
+const NEXT_PUBLIC_SERVER_URL = process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:3000'
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      ...[NEXT_PUBLIC_SERVER_URL /* 'https://example.com' */].map((item) => {
+        const url = new URL(item)
+
+        return {
+          hostname: url.hostname,
+          protocol: url.protocol.replace(':', ''),
+        }
+      }),
+    ],
+  },
+  reactStrictMode: true,
+  redirects,
+}
+
+export default withNextIntl(withPayload(nextConfig))

examples/localization/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "payload-localization-example",
+  "version": "1.0.0",
+  "description": "An example of how to use Payload's localization features",
+  "type": "module",
+  "scripts": {
+    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
+    "dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
+    "dev:prod": "cross-env NODE_OPTIONS=--no-deprecation rm -rf .next && pnpm build && pnpm start",
+    "generate:importmap": "cross-env NODE_OPTIONS=--no-deprecation payload generate:importmap",
+    "generate:types": "cross-env NODE_OPTIONS=--no-deprecation payload generate:types",
+    "ii": "cross-env NODE_OPTIONS=--no-deprecation pnpm --ignore-workspace install",
+    "lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
+    "lint:fix": "cross-env NODE_OPTIONS=--no-deprecation next lint --fix",
+    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
+    "reinstall": "cross-env NODE_OPTIONS=--no-deprecation rm -rf node_modules && rm pnpm-lock.yaml && pnpm --ignore-workspace install",
+    "start": "cross-env NODE_OPTIONS=--no-deprecation next start"
+  },
+  "dependencies": {
+    "@payloadcms/db-mongodb": "latest",
+    "@payloadcms/live-preview-react": "latest",
+    "@payloadcms/next": "latest",
+    "@payloadcms/payload-cloud": "latest",
+    "@payloadcms/plugin-form-builder": "latest",
+    "@payloadcms/plugin-nested-docs": "latest",
+    "@payloadcms/plugin-redirects": "latest",
+    "@payloadcms/plugin-search": "latest",
+    "@payloadcms/plugin-seo": "latest",
+    "@payloadcms/richtext-lexical": "latest",
+    "@payloadcms/ui": "latest",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-slot": "^1.0.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "cross-env": "^7.0.3",
+    "geist": "^1.3.0",
+    "graphql": "^16.8.2",
+    "jsonwebtoken": "9.0.2",
+    "lucide-react": "^0.378.0",
+    "next": "^15.1.0",
+    "next-intl": "^3.23.2",
+    "payload": "latest",
+    "payload-admin-bar": "^1.0.6",
+    "prism-react-renderer": "^2.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "7.45.4",
+    "sharp": "0.32.6",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.2.0",
+    "@tailwindcss/typography": "^0.5.13",
+    "@types/escape-html": "^1.0.2",
+    "@types/jsonwebtoken": "^9.0.6",
+    "@types/node": "22.5.4",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1",
+    "autoprefixer": "^10.4.19",
+    "copyfiles": "^2.4.1",
+    "eslint": "^9.16.0",
+    "eslint-config-next": "15.1.0",
+    "postcss": "^8.4.38",
+    "prettier": "^3.4.2",
+    "tailwindcss": "^3.4.3",
+    "typescript": "5.7.2"
+  },
+  "engines": {
+    "node": "^18.20.2 || >=20.9.0"
+  }
+}