support nextjs 15 & provide example

desentio · Oct 24, 2024 · 5e414ac · 5e414ac
1 parent 807542f
commit 5e414ac
Show file tree

Hide file tree

Showing 30 changed files with 6,555 additions and 21 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,9 +1,10 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 /dist
+.next
 
 # dependencies
-/node_modules
+node_modules
 /.pnp
 .pnp.js
 .yarn/install-state.gz

diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,3 @@
+node_modules
+examples
+src
diff --git a/README.md b/README.md
@@ -1 +1,109 @@
-# globalseo-next
+# About globalseo-next
+
+Globalseo is a translation service that allows you to translate your website into multiple languages with low effort (powered by AI). This package provides a simple way to integrate [Globalseo](https://app.globalseo.ai) with your Next.js website.
+
+## Integration with subdomains (Recommended, better for SEO)
+For SEO purposes, it is recommended to use subdomains because our subdomain server will translate the page and return the html to the client. This way, the search engine will see the translated content without executing javascript.
+
+**Usage**: put GlobalSeoScript component at the end of the body tag.
+
+**File to modify for page router**: [pages/_document.tsx](./example/src/pages/_document.tsx)
+
+**File to modify app router**: [app/layout.tsx](./example/src/app/layout.tsx)
+
+```
+import {GlobalSeoScript} from "globalseo-next";
+
+<body>
+  <GlobalSeoScript
+    translationMode="subdomain"
+    apiKey="YOUR_API_KEY"
+    originalLanguage="en"
+    allowedLanguages="en, es"
+    excludeClasses="class1, class2"
+    excludeIds="id1, id2"
+    customLinks={{
+      'https://www.example.com/file_en.pdf': {
+        de: 'https://www.example.com/file_de.pdf',
+        fr: 'https://www.example.com/file_fr.pdf',
+        es: 'https://www.example.com/file_es.pdf',
+      },
+      'https://www.example.com/file_en.doc': {
+        de: 'https://www.example.com/file_de.doc',
+        fr: 'https://www.example.com/file_fr.doc',
+        es: 'https://www.example.com/file_es.doc',
+      },
+    }}
+  />
+</body>
+```
+
+## Integration using client side translation
+Best for single page applications that don't need SEO.
+
+**Usage**: put GlobalSeoScript component at the end of the body tag.
+
+**File to modify for page router**: [pages/_document.js](./example/src/pages/_document.tsx)
+
+**File to modify app router**: [app/layout.js](./example/src/app/layout.tsx)
+
+```
+import Head from "next/head";
+import {GlobalSeoScript} from "globalseo-next";
+
+<body>
+  <GlobalSeoScript
+    translationMode="client_side_only"
+    apiKey="YOUR_API_KEY"
+    originalLanguage="en"
+    allowedLanguages="en, es"
+    excludeClasses="class1, class2"
+    excludeIds="id1, id2"
+    useBrowserLanguage="true"
+  />
+</body>
+```
+
+# Add language switcher
+
+Put GlobalSeoSelector component where you want the language switcher to appear.
+
+**Example on page router**: [pages/language-selector-app-router.tsx](./example/src/pages/language-selector-page-router.tsx)
+
+**Example on app router**: [app/language-selector-app-router/page.tsx](./example/src/app/language-selector-app-router/page.tsx)
+
+```
+import {GlobalSeoSelector} from "globalseo-next";
+
+<GlobalSeoSelector color="#000" />
+```
+
+
+# Script Props:
+
+#### Required Configuration:
+
+- **apiKey**: Replace YOUR_API_KEY with the actual API key obtained from your project.
+- **originalLanguage**: The original language of the website.
+- **allowedLanguages**:  The languages that the website will be translated to.
+
+#### Subdomain Configuration:
+- **translationMode**: Set to `subdomain` to use subdomains for translated pages.
+- **domainSourcePrefix**: If your website already implemented internationalization with path prefix, you can set this to the path prefix. For example, if your website has `/en/page-name` you can set this to `/en` so we can serve the page from `en.yourdomain.com/page-name` instead of `en.yourdomain.com/en/page-name`
+- **customLinks**: Custom links for each language. The key must be exactly the same as the value of the `href` attribute of the link.
+
+#### Optional Configuration:
+- **useBrowserLanguage**: Automatically sets the language based on the user's browser language. Set to `false` to disable.
+- **excludeClasses**: List CSS class names to exclude from translation, separated by commas (e.g., `chatbot, no-translate`).
+- **excludeIds**: List IDs to exclude from translation, separated by commas (e.g., `user-comment, code-snippet` will prevent translation of elements with ID `user-comment` and `code-snippet`).
+
+#### Advanced Configuration:
+- **translateAttributes**: Translates `title` & `alt` attributes of images and links. Improves SEO and accessibility. Set to `true` to enable.
+- **langParameter**: URL parameter for setting the language (default: "lang"). Use a custom value if preferred.
+- **delay**: Delay (in milliseconds) before the translation service activates, ensuring the page content is fully loaded.
+- **replaceLinks**:  Replaces links with translated URLs by appending the language code. Set to `false` to disable.
+- **customLanguageCode**: Custom language code for the language selector (e.g., `kk=kz` for "KZ" instead of "KK").
+- **excludeContents**: Excludes specific text from translation using regular expressions. Format: `{{regex1}} {{regex2}}`.
+- **translateFormPlaceholder**: Translates form placeholders. Set to `true` to enable.
+- **dynamicTranslation**: Allow GlobalSEO to automatically generate new translations. Set to `false` to disable. If you have already reached the quota limit, setting this to false will prevent the error message from appearing on your site.
+- **translateSelectOptions**: Translate options inside select tag. Set to `true` to enable. The `globalseo-exclude` class will still be respected. 
diff --git a/example/.eslintrc.json b/example/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}
diff --git a/example/.gitignore b/example/.gitignore
@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for commiting if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/example/README.md b/example/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/example/next.config.ts b/example/next.config.ts
@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;