# Stafflyn Next.js SEO Integration Guide This guide explains how to integrate the Stafflyn backend SEO schema endpoints into your Next.js frontend application. ## 📋 Overview The Stafflyn backend provides JSON-LD schema endpoints for SEO. This package provides TypeScript hooks and components to easily integrate them into your Next.js app. ### Available Endpoints - **Blog Schema**: `GET /api/schema/blog//` - Article schema for blog posts - **Job Schema**: `GET /api/schema/job//` - JobPosting schema for job listings - **Organization Schema**: `GET /api/schema/organization/` - Organization schema for company info - **Breadcrumb Schema**: `GET /api/schema/breadcrumb/?path=` - BreadcrumbList schema --- ## 🚀 Setup ### 1. Copy the Integration Files Copy `NEXT_JS_SEO_INTEGRATION.ts` to your Next.js project: ```bash # Copy to your Next.js lib folder cp NEXT_JS_SEO_INTEGRATION.ts your-nextjs-app/src/lib/stafflyn-seo.ts ``` ### 2. Configure Environment Variables Create or update `.env.local`: ```env NEXT_PUBLIC_API_URL=http://localhost:8000/api ``` For production: ```env NEXT_PUBLIC_API_URL=https://your-api-domain.com/api ``` ### 3. Install Optional Dependencies (Recommended) ```bash npm install next-seo # or yarn add next-seo ``` --- ## 📖 Usage Examples ### Example 1: Blog Post Page ```typescript // pages/blogs/[slug].tsx import Head from 'next/head'; import { useBlogSchema, SchemaScript } from '@/lib/stafflyn-seo'; export default function BlogPage({ blog }) { const { schema } = useBlogSchema(blog.slug); return ( <> {blog.meta_title || blog.title}

{blog.title}

Reading time: {blog.reading_time} minutes

${blog.featured_image_alt}$

{blog.content}

); } ``` ### Example 2: Job Post Page ```typescript // pages/jobs/[id].tsx import Head from 'next/head'; import { useJobSchema, SchemaScript } from '@/lib/stafflyn-seo'; export default function JobPage({ job }) { const { schema } = useJobSchema(job.slug); return ( <> {job.meta_title || job.title}

{job.title}

{job.CompanyName} - {job.CompanyCountry}

{job.requirements}

); } ``` ### Example 3: Breadcrumb Navigation ```typescript import { BreadcrumbComponent } from '@/lib/stafflyn-seo'; import { useRouter } from 'next/router'; export default function Layout({ children }) { const router = useRouter(); return ( <> {children} ); } ``` ### Example 4: Global Organization Schema ```typescript // pages/_app.tsx import Head from 'next/head'; import { useOrganizationSchema, SchemaScript } from '@/lib/stafflyn-seo'; function MyApp({ Component, pageProps }) { const { schema: orgSchema } = useOrganizationSchema(); return ( <> ); } export default MyApp; ``` --- ## 🎣 Available Hooks ### `useSchema(endpoint: string, options?: { skip?: boolean })` Generic hook to fetch any schema endpoint. ```typescript const { schema, loading, error } = useSchema('/schema/blog/my-post/'); if (loading) return

; if (error) return

Error: {error.message}

; return ; ``` ### `useBlogSchema(slug: string)` Fetch blog article schema. ```typescript const { schema, loading } = useBlogSchema('my-blog-post'); ``` ### `useJobSchema(jobId: number | string)` Fetch job posting schema. ```typescript const { schema, loading } = useJobSchema(123); ``` ### `useOrganizationSchema()` Fetch organization schema. ```typescript const { schema } = useOrganizationSchema(); ``` ### `useBreadcrumbSchema(path: string)` Fetch breadcrumb schema for a path. ```typescript const { schema } = useBreadcrumbSchema('/blogs/my-post'); ``` --- ## 🔧 Available Components ### `` Injects JSON-LD schema into page head. ```typescript ``` ### `` Wrapper component for blog schema injection. ```typescript

Blog content here

``` ### `` Wrapper component for job schema injection. ```typescript

Job content here

``` ### `` Breadcrumb navigation with schema. ```typescript ``` --- ## 📊 Helper Functions ### `getMetaTagsFromSchema(schema)` Extract meta tag data from schema. ```typescript const { schema } = useBlogSchema(slug); const meta = getMetaTagsFromSchema(schema); // Returns: // { // title: "Blog title", // description: "Meta description", // image: "image URL", // author: "Author name" // } ``` --- ## 🌐 With next-seo Package (Alternative) If you prefer using the `next-seo` package, you can use their components directly: ```typescript import { ArticleJsonLd } from 'next-seo'; export default function BlogPage({ blog }) { return ( <> {/* Page content */} ); } ``` --- ## ✅ Checklist for SEO Setup - [ ] Copy `NEXT_JS_SEO_INTEGRATION.ts` to your project - [ ] Configure `NEXT_PUBLIC_API_URL` in `.env.local` - [ ] Update all blog pages to use `useBlogSchema` hook - [ ] Update all job pages to use `useJobSchema` hook - [ ] Add `` to your layout - [ ] Add organization schema in `_app.tsx` or root layout - [ ] Add meta titles and descriptions to all pages - [ ] Test with Google Search Console - [ ] Validate schemas with [Schema.org validator](https://validator.schema.org/) - [ ] Monitor SEO performance with Google Analytics --- ## 🧪 Testing Schema Markup ### 1. Google's Rich Results Test Go to: https://search.google.com/test/rich-results Paste your page URL and check if schema is detected. ### 2. Schema.org Validator Go to: https://validator.schema.org/ Paste your page HTML to validate schema markup. ### 3. Browser DevTools Check the `` tag for `