├── .eslintrc.json
├── .env.local.example
├── .gitignore
├── preview.png
├── app
    ├── globals.css
    ├── api
    │   ├── exit-draft
    │   │   └── route.js
    │   ├── draft
    │   │   └── route.js
    │   ├── preview-links
    │   │   └── route.js
    │   ├── post-install
    │   │   └── route.js
    │   └── seo-readability-metadata
    │   │   └── route.js
    ├── layout.js
    ├── page.js
    └── posts
    │   └── [slug]
    │       └── page.js
├── next.config.js
├── postcss.config.js
├── netlify.toml
├── components
    ├── section-separator.js
    ├── container.js
    ├── date.js
    ├── post-title.js
    ├── header.js
    ├── draft-post-page.js
    ├── draft-post-index.js
    ├── avatar.js
    ├── cover-image.js
    ├── post-index.js
    ├── post-page.js
    ├── more-stories.js
    ├── post-body.js
    ├── intro.js
    ├── post-preview.js
    ├── post-header.js
    ├── hero-post.js
    ├── footer.js
    └── alert.js
├── jsconfig.json
├── lib
    ├── fragments.js
    └── datocms.js
├── datocms.json
├── package.json
├── tailwind.config.js
└── README.md


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/.env.local.example:
--------------------------------------------------------------------------------
1 | NEXT_DATOCMS_API_TOKEN=
2 | NEXT_DATOCMS_PREVIEW_SECRET=


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .env
2 | .env.local
3 | .now
4 | .next
5 | node_modules/
6 | out/


--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/datocms/nextjs-demo/HEAD/preview.png


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {}
3 | 
4 | module.exports = nextConfig
5 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   publish = ".next"
3 |   command = "npm run build"
4 | 
5 | [[plugins]]
6 |   package = "@netlify/plugin-nextjs"


--------------------------------------------------------------------------------
/components/section-separator.js:
--------------------------------------------------------------------------------
1 | export default function SectionSeparator() {
2 |   return <hr className="border-accent-2 mt-28 mb-24" />;
3 | }
4 | 


--------------------------------------------------------------------------------
/components/container.js:
--------------------------------------------------------------------------------
1 | export default function Container({ children }) {
2 |   return <div className="container mx-auto px-5">{children}</div>;
3 | }
4 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "paths": {
 5 |       "@/components/*": [
 6 |         "components/*"
 7 |       ],
 8 |       "@/lib/*": [
 9 |         "lib/*"
10 |       ]
11 |     }
12 |   }
13 | }


--------------------------------------------------------------------------------
/components/date.js:
--------------------------------------------------------------------------------
1 | import { parseISO, format } from "date-fns";
2 | 
3 | export default function Date({ dateString }) {
4 |   const date = parseISO(dateString);
5 |   return <time dateTime={dateString}>{format(date, "LLLL	d, yyyy")}</time>;
6 | }
7 | 


--------------------------------------------------------------------------------
/app/api/exit-draft/route.js:
--------------------------------------------------------------------------------
1 | import { draftMode } from 'next/headers'
2 | import { redirect } from 'next/navigation'
3 | 
4 | export async function GET() {
5 |   // Exit the current user from "Draft Mode". This function accepts no args.
6 |   draftMode().disable()
7 |   redirect('/')
8 | }
9 | 


--------------------------------------------------------------------------------
/components/post-title.js:
--------------------------------------------------------------------------------
1 | export default function PostTitle({ children }) {
2 |   return (
3 |     <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
4 |       {children}
5 |     </h1>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/components/header.js:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | 
 3 | export default function Header() {
 4 |   return (
 5 |     <h2 className="text-2xl md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight mb-20 mt-8">
 6 |       <Link href="/" className="hover:underline">Blog</Link>.
 7 |     </h2>
 8 |   );
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/draft-post-page.js:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useQuerySubscription } from "react-datocms/use-query-subscription";
 4 | import { PostPage } from "./post-page";
 5 | 
 6 | export function DraftPostPage({ subscription }) {
 7 |   const { data } = useQuerySubscription(subscription);
 8 | 
 9 |   return <PostPage data={data} />;
10 | }
11 | 


--------------------------------------------------------------------------------
/components/draft-post-index.js:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useQuerySubscription } from "react-datocms/use-query-subscription";
 4 | import { PostIndex } from "./post-index";
 5 | 
 6 | export function DraftPostIndex({ subscription }) {
 7 |   const { data } = useQuerySubscription(subscription);
 8 | 
 9 |   return <PostIndex data={data} />;
10 | }
11 | 


--------------------------------------------------------------------------------
/components/avatar.js:
--------------------------------------------------------------------------------
 1 | import { Image } from "react-datocms";
 2 | 
 3 | export default function Avatar({ name, picture }) {
 4 |   return (
 5 |     <div className="flex items-center">
 6 |       <div className="w-12 h-12 mr-4">
 7 |         <Image
 8 |           alt={name}
 9 |           data={picture.responsiveImage}
10 |           className="rounded-full"
11 |         />
12 |       </div>
13 |       <div className="text-xl font-bold">{name}</div>
14 |     </div>
15 |   );
16 | }
17 | 


--------------------------------------------------------------------------------
/lib/fragments.js:
--------------------------------------------------------------------------------
 1 | // See: https://www.datocms.com/blog/offer-responsive-progressive-lqip-images-in-2020
 2 | export const responsiveImageFragment = `
 3 |   fragment responsiveImageFragment on ResponsiveImage {
 4 |     srcSet
 5 |     webpSrcSet
 6 |     sizes
 7 |     src
 8 |     width
 9 |     height
10 |     aspectRatio
11 |     alt
12 |     title
13 |     base64
14 |   }
15 | `;
16 | 
17 | export const metaTagsFragment = `
18 |   fragment metaTagsFragment on Tag {
19 |     attributes
20 |     content
21 |     tag
22 |   }
23 | `;
24 | 


--------------------------------------------------------------------------------
/datocms.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Next.js Blog",
 3 |   "description": "Simple blog website built with Next.js and DatoCMS, with real-time updates in preview mode",
 4 |   "previewImage": "https://www.datocms-assets.com/205/1605198221-screenshot2020-11-12-next-js-blog-example-with-datocms-1.jpg?crop=top&fit=crop&h=500&w=600&auto=format",
 5 |   "datocmsProjectId": "23796",
 6 |   "deploymentType": "static",
 7 |   "buildCommand": "npm run build",
 8 |   "datocmsApiTokenEnvName": "NEXT_DATOCMS_API_TOKEN",
 9 |   "livePreviewUrl": "https://nextjs-demo-bay.vercel.app/",
10 |   "postInstallUrl": "/api/post-install"
11 | }
12 | 


--------------------------------------------------------------------------------
/app/layout.js:
--------------------------------------------------------------------------------
 1 | import "./globals.css";
 2 | 
 3 | import Alert from "@/components/alert";
 4 | import Footer from "@/components/footer";
 5 | 
 6 | import { draftMode } from "next/headers";
 7 | import Container from "@/components/container";
 8 | 
 9 | export default function RootLayout({ children }) {
10 |   const { isEnabled } = draftMode();
11 | 
12 |   return (
13 |     <html lang="en">
14 |       <body>
15 |         <div className="min-h-screen">
16 |           <Alert preview={isEnabled} />
17 |           <main>
18 |             <Container>{children}</Container>
19 |           </main>
20 |         </div>
21 |         <Footer />
22 |       </body>
23 |     </html>
24 |   );
25 | }
26 | 


--------------------------------------------------------------------------------
/components/cover-image.js:
--------------------------------------------------------------------------------
 1 | import { Image as DatocmsImage } from "react-datocms";
 2 | import cn from "classnames";
 3 | import Link from "next/link";
 4 | 
 5 | export default function CoverImage({ title, responsiveImage, slug }) {
 6 |   const image = (
 7 |     <DatocmsImage
 8 |       data={{
 9 |         ...responsiveImage,
10 |         alt: `Cover Image for ${title}`,
11 |       }}
12 |       className={cn("shadow-small", {
13 |         "hover:shadow-medium transition-shadow duration-200": slug,
14 |       })}
15 |     />
16 |   );
17 |   return (
18 |     <div className="-mx-5 sm:mx-0">
19 |       {slug ? (
20 |         <Link href={`/posts/${slug}`} aria-label={title}>{image}</Link>
21 |       ) : (
22 |         image
23 |       )}
24 |     </div>
25 |   );
26 | }
27 | 


--------------------------------------------------------------------------------
/components/post-index.js:
--------------------------------------------------------------------------------
 1 | import HeroPost from "./hero-post";
 2 | import Intro from "./intro";
 3 | import MoreStories from "./more-stories";
 4 | 
 5 | export function PostIndex({ data }) {
 6 |   const { allPosts } = data;
 7 | 
 8 |   const heroPost = allPosts[0];
 9 |   const morePosts = allPosts.slice(1);
10 | 
11 |   return (
12 |     <>
13 |       <Intro />
14 |       {heroPost && (
15 |         <HeroPost
16 |           title={heroPost.title}
17 |           coverImage={heroPost.coverImage}
18 |           date={heroPost.date}
19 |           author={heroPost.author}
20 |           slug={heroPost.slug}
21 |           excerpt={heroPost.excerpt}
22 |         />
23 |       )}
24 |       {morePosts.length > 0 && <MoreStories posts={morePosts} />}
25 |     </>
26 |   );
27 | }
28 | 


--------------------------------------------------------------------------------
/components/post-page.js:
--------------------------------------------------------------------------------
 1 | import Header from "./header";
 2 | import MoreStories from "./more-stories";
 3 | import PostBody from "./post-body";
 4 | import PostHeader from "./post-header";
 5 | import SectionSeparator from "./section-separator";
 6 | 
 7 | export function PostPage({ data }) {
 8 |   const { post, morePosts } = data;
 9 | 
10 |   return (
11 |     <>
12 |       <Header />
13 |       <article>
14 |         <PostHeader
15 |           title={post.title}
16 |           coverImage={post.coverImage}
17 |           date={post.date}
18 |           author={post.author}
19 |         />
20 |         <PostBody content={post.content} />
21 |       </article>
22 |       <SectionSeparator />
23 |       {morePosts.length > 0 && <MoreStories posts={morePosts} />}
24 |     </>
25 |   );
26 | }


--------------------------------------------------------------------------------
/components/more-stories.js:
--------------------------------------------------------------------------------
 1 | import PostPreview from "./post-preview";
 2 | 
 3 | export default function MoreStories({ posts }) {
 4 |   return (
 5 |     <section>
 6 |       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
 7 |         More Stories
 8 |       </h2>
 9 |       <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
10 |         {posts.map((post) => (
11 |           <PostPreview
12 |             key={post.slug}
13 |             title={post.title}
14 |             coverImage={post.coverImage}
15 |             date={post.date}
16 |             author={post.author}
17 |             slug={post.slug}
18 |             excerpt={post.excerpt}
19 |           />
20 |         ))}
21 |       </div>
22 |     </section>
23 |   );
24 | }
25 | 


--------------------------------------------------------------------------------
/components/post-body.js:
--------------------------------------------------------------------------------
 1 | import { StructuredText, Image as DatocmsImage } from 'react-datocms';
 2 | 
 3 | export default function PostBody({ content }) {
 4 |   return (
 5 |     <div className="max-w-2xl mx-auto">
 6 |       <div className="prose prose-lg prose-blue" id="main-content">
 7 |         <StructuredText
 8 |           data={content}
 9 |           renderBlock={({ record }) => {
10 |             if (record.__typename === 'ImageBlockRecord') {
11 |               return <DatocmsImage data={record.image.responsiveImage} />;
12 |             }
13 | 
14 |             return (
15 |               <>
16 |                 <p>Don&apos;t know how to render a block!</p>
17 |                 <pre>{JSON.stringify(record, null, 2)}</pre>
18 |               </>
19 |             );
20 |           }}
21 |         />
22 |       </div>
23 |     </div>
24 |   );
25 | }
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cms-datocms",
 3 |   "version": "1.0.0",
 4 |   "scripts": {
 5 |     "dev": "next dev",
 6 |     "build": "next build",
 7 |     "start": "next start",
 8 |     "lint": "next lint",
 9 |     "export": "next build && next export"
10 |   },
11 |   "dependencies": {
12 |     "@datocms/cma-client-node": "*",
13 |     "classnames": "2.3.1",
14 |     "date-fns": "^2.28.0",
15 |     "eslint": "8.43.0",
16 |     "eslint-config-next": "13.4.7",
17 |     "jsdom": "^20.0.1",
18 |     "next": "^13.4.7",
19 |     "react": "^18.0.0",
20 |     "react-datocms": "^4.0.0",
21 |     "react-dom": "^18.0.0"
22 |   },
23 |   "devDependencies": {
24 |     "@tailwindcss/typography": "^0.5.9",
25 |     "autoprefixer": "^10.4.14",
26 |     "dotenv": "14.3.0",
27 |     "postcss": "^8.4.21",
28 |     "tailwindcss": "^3.3.2"
29 |   },
30 |   "engines": {
31 |     "node": ">=18.0.0"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/components/intro.js:
--------------------------------------------------------------------------------
 1 | export default function Intro() {
 2 |   return (
 3 |     <section className="flex-col md:flex-row flex items-center md:justify-between mt-16 mb-16 md:mb-12">
 4 |       <h1 className="text-6xl md:text-8xl font-bold tracking-tighter leading-tight md:pr-8">
 5 |         Blog.
 6 |       </h1>
 7 |       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
 8 |         A statically generated blog example using{" "}
 9 |         <a
10 |           href="https://nextjs.org/"
11 |           className="underline hover:text-success duration-200 transition-colors"
12 |         >
13 |           Next.js
14 |         </a>{" "}
15 |         and{" "}
16 |         <a
17 |           href="https://www.datocms.com/"
18 |           className="underline hover:text-success duration-200 transition-colors"
19 |         >
20 |           DatoCMS
21 |         </a>
22 |         .
23 |       </h4>
24 |     </section>
25 |   );
26 | }
27 | 


--------------------------------------------------------------------------------
/components/post-preview.js:
--------------------------------------------------------------------------------
 1 | import Avatar from "./avatar";
 2 | import Date from "./date";
 3 | import CoverImage from "./cover-image";
 4 | import Link from "next/link";
 5 | 
 6 | export default function PostPreview({
 7 |   title,
 8 |   coverImage,
 9 |   date,
10 |   excerpt,
11 |   author,
12 |   slug,
13 | }) {
14 |   return (
15 |     <div>
16 |       <div className="mb-5">
17 |         <CoverImage
18 |           slug={slug}
19 |           title={title}
20 |           responsiveImage={coverImage.responsiveImage}
21 |         />
22 |       </div>
23 |       <h3 className="text-3xl mb-3 leading-snug">
24 |         <Link href={`/posts/${slug}`} className="hover:underline">{title}</Link>
25 |       </h3>
26 |       <div className="text-lg mb-4">
27 |         <Date dateString={date} />
28 |       </div>
29 |       <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
30 |       <Avatar name={author.name} picture={author.picture} />
31 |     </div>
32 |   );
33 | }
34 | 


--------------------------------------------------------------------------------
/components/post-header.js:
--------------------------------------------------------------------------------
 1 | import Avatar from "./avatar";
 2 | import Date from "./date";
 3 | import CoverImage from "./cover-image";
 4 | import PostTitle from "./post-title";
 5 | 
 6 | export default function PostHeader({ title, coverImage, date, author }) {
 7 |   return (
 8 |     <>
 9 |       <PostTitle>{title}</PostTitle>
10 |       <div className="hidden md:block md:mb-12">
11 |         <Avatar name={author.name} picture={author.picture} />
12 |       </div>
13 |       <div className="mb-8 md:mb-16 -mx-5 sm:mx-0">
14 |         <CoverImage
15 |           title={title}
16 |           responsiveImage={coverImage.responsiveImage}
17 |         />
18 |       </div>
19 |       <div className="max-w-2xl mx-auto">
20 |         <div className="block md:hidden mb-6">
21 |           <Avatar name={author.name} picture={author.picture} />
22 |         </div>
23 |         <div className="mb-6 text-lg">
24 |           <Date dateString={date} />
25 |         </div>
26 |       </div>
27 |     </>
28 |   );
29 | }
30 | 


--------------------------------------------------------------------------------
/app/api/draft/route.js:
--------------------------------------------------------------------------------
 1 | import { NextResponse } from "next/server";
 2 | import { draftMode } from "next/headers";
 3 | import { redirect } from "next/navigation";
 4 | 
 5 | export async function GET(request) {
 6 |   // Please set the NEXT_DATOCMS_PREVIEW_SECRET env variable
 7 |   // on Vercel/Netlify, or everyone will be able to enter Preview Mode and
 8 |   // see draft content!
 9 |   const secret = process.env.NEXT_DATOCMS_PREVIEW_SECRET;
10 | 
11 |   const { searchParams } = new URL(request.url);
12 | 
13 |   // Check the secret and next parameters
14 |   if (secret && searchParams.get("secret") !== secret) {
15 |     return NextResponse.json({
16 |       message: "Missing or invalid `secret` query string parameter!",
17 |     }, { status: 401 });
18 |   }
19 | 
20 |   draftMode().enable();
21 | 
22 |   // Redirect to the homepage, or to the URL provided with the `redirect` query string parameter:
23 |   const redirectUrl = new URL(
24 |     searchParams.get("redirect") || "/",
25 |     "https://example.com"
26 |   );
27 | 
28 |   redirect(`${redirectUrl.pathname}${redirectUrl.search}`);
29 | }
30 | 


--------------------------------------------------------------------------------
/components/hero-post.js:
--------------------------------------------------------------------------------
 1 | import Avatar from "./avatar";
 2 | import Date from "./date";
 3 | import CoverImage from "./cover-image";
 4 | import Link from "next/link";
 5 | 
 6 | export default function HeroPost({
 7 |   title,
 8 |   coverImage,
 9 |   date,
10 |   excerpt,
11 |   author,
12 |   slug,
13 | }) {
14 |   return (
15 |     <section>
16 |       <div className="mb-8 md:mb-16">
17 |         <CoverImage
18 |           title={title}
19 |           responsiveImage={coverImage.responsiveImage}
20 |           slug={slug}
21 |         />
22 |       </div>
23 |       <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
24 |         <div>
25 |           <h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
26 |             <Link href={`/posts/${slug}`} className="hover:underline">{title}</Link>
27 |           </h3>
28 |           <div className="mb-4 md:mb-0 text-lg">
29 |             <Date dateString={date} />
30 |           </div>
31 |         </div>
32 |         <div>
33 |           <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
34 |           <Avatar name={author.name} picture={author.picture} />
35 |         </div>
36 |       </div>
37 |     </section>
38 |   );
39 | }
40 | 


--------------------------------------------------------------------------------
/components/footer.js:
--------------------------------------------------------------------------------
 1 | import Container from "./container";
 2 | 
 3 | export default function Footer() {
 4 |   return (
 5 |     <footer className="bg-accent-1 border-t border-accent-2">
 6 |       <Container>
 7 |         <div className="py-28 flex flex-col lg:flex-row items-center">
 8 |           <h3 className="text-4xl lg:text-5xl font-bold tracking-tighter leading-tight text-center lg:text-left mb-10 lg:mb-0 lg:pr-4 lg:w-1/2">
 9 |             Statically Generated with Next.js.
10 |           </h3>
11 |           <div className="flex flex-col lg:flex-row justify-center items-center lg:pl-4 lg:w-1/2">
12 |             <a
13 |               href="https://www.datocms.com/docs/next-js"
14 |               className="mx-3 bg-black hover:bg-white hover:text-black border border-black text-white font-bold py-3 px-12 lg:px-8 duration-200 transition-colors mb-6 lg:mb-0"
15 |             >
16 |               Read Documentation
17 |             </a>
18 |             <a
19 |               href="https://github.com/datocms/nextjs-demo"
20 |               className="mx-3 font-bold hover:underline"
21 |             >
22 |               View on GitHub
23 |             </a>
24 |           </div>
25 |         </div>
26 |       </Container>
27 |     </footer>
28 |   );
29 | }
30 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   mode: "jit",
 3 |   content: [
 4 |     "./app/**/*.{js,ts,jsx,tsx}",
 5 |     "./components/**/*.{js,ts,jsx,tsx}",
 6 |   ],
 7 |   theme: {
 8 |     extend: {
 9 |       colors: {
10 |         "accent-1": "#FAFAFA",
11 |         "accent-2": "#EAEAEA",
12 |         "accent-7": "#333",
13 |         success: "#0070f3",
14 |         cyan: "#79FFE1",
15 |       },
16 |       spacing: {
17 |         28: "7rem",
18 |       },
19 |       letterSpacing: {
20 |         tighter: "-.04em",
21 |       },
22 |       lineHeight: {
23 |         tight: 1.2,
24 |       },
25 |       fontSize: {
26 |         "5xl": "2.5rem",
27 |         "6xl": "2.75rem",
28 |         "7xl": "4.5rem",
29 |         "8xl": "6.25rem",
30 |       },
31 |       boxShadow: {
32 |         small: "0 5px 10px rgba(0, 0, 0, 0.12)",
33 |         medium: "0 8px 30px rgba(0, 0, 0, 0.12)",
34 |       },
35 |       typography: {
36 |         lg: {
37 |           css: {
38 |             img: {
39 |               marginTop: "0",
40 |               marginBottom: "0",
41 |             },
42 |           },
43 |         },
44 |       },
45 |     },
46 |   },
47 |   variants: {
48 |     extend: {},
49 |   },
50 |   plugins: [require("@tailwindcss/typography")],
51 | };
52 | 


--------------------------------------------------------------------------------
/components/alert.js:
--------------------------------------------------------------------------------
 1 | import Container from "./container";
 2 | import cn from "classnames";
 3 | 
 4 | export default function Alert({ preview }) {
 5 |   return (
 6 |     <div
 7 |       className={cn("border-b", {
 8 |         "bg-accent-7 border-accent-7 text-white": preview,
 9 |         "bg-accent-1 border-accent-2": !preview,
10 |       })}
11 |     >
12 |       <Container>
13 |         <div className="py-2 text-center text-sm">
14 |           {preview ? (
15 |             <>
16 |               This is page is showing draft content.{" "}
17 |               <a
18 |                 href="/api/exit-draft"
19 |                 className="underline hover:text-success duration-200 transition-colors"
20 |               >
21 |                 Click here
22 |               </a>{" "}
23 |               to exit preview mode.
24 |             </>
25 |           ) : (
26 |             <>
27 |               This is page is showing published content.{" "}
28 |               <a
29 |                 href="/api/draft"
30 |                 className="underline hover:text-success duration-200 transition-colors"
31 |               >
32 |                 Click here
33 |               </a>{" "}
34 |               to enter preview mode!
35 |             </>
36 |           )}
37 |         </div>
38 |       </Container>
39 |     </div>
40 |   );
41 | }
42 | 


--------------------------------------------------------------------------------
/lib/datocms.js:
--------------------------------------------------------------------------------
 1 | import { cache } from 'react';
 2 | 
 3 | const dedupedFetch = cache(
 4 |   async (
 5 |     body,
 6 |     includeDrafts = false,
 7 |     excludeInvalid = false,
 8 |     visualEditingBaseUrl = null,
 9 |     revalidate = null,
10 |   ) => {
11 |     const headers = {
12 |       Authorization: `Bearer ${process.env.NEXT_DATOCMS_API_TOKEN}`,
13 |       ...(includeDrafts ? { 'X-Include-Drafts': 'true' } : {}),
14 |       ...(excludeInvalid ? { 'X-Exclude-Invalid': 'true' } : {}),
15 |       ...(visualEditingBaseUrl
16 |         ? {
17 |             'X-Visual-Editing': 'vercel-v1',
18 |             'X-Base-Editing-Url': visualEditingBaseUrl,
19 |           }
20 |         : {}),
21 |       ...(process.env.NEXT_DATOCMS_ENVIRONMENT
22 |         ? { 'X-Environment': process.env.NEXT_DATOCMS_ENVIRONMENT }
23 |         : {}),
24 |     };
25 | 
26 |     const response = await fetch('https://graphql.datocms.com/', {
27 |       method: 'POST',
28 |       headers,
29 |       body,
30 |       next: { revalidate },
31 |     });
32 | 
33 |     const responseBody = await response.json();
34 | 
35 |     if (!response.ok) {
36 |       throw new Error(
37 |         `${response.status} ${response.statusText}: ${JSON.stringify(
38 |           responseBody,
39 |         )}`,
40 |       );
41 |     }
42 | 
43 |     return responseBody;
44 |   },
45 | );
46 | 
47 | export async function performRequest({
48 |   query,
49 |   variables = {},
50 |   includeDrafts = false,
51 |   excludeInvalid = false,
52 |   visualEditingBaseUrl,
53 |   revalidate,
54 | }) {
55 |   const { data } = await dedupedFetch(
56 |     JSON.stringify({ query, variables, revalidate }),
57 |     includeDrafts,
58 |     excludeInvalid,
59 |     visualEditingBaseUrl,
60 |     revalidate,
61 |   );
62 | 
63 |   return data;
64 | }
65 | 


--------------------------------------------------------------------------------
/app/api/preview-links/route.js:
--------------------------------------------------------------------------------
 1 | import { NextResponse } from 'next/server';
 2 | 
 3 | const corsInitOptions = {
 4 |   headers: {
 5 |     "Access-Control-Allow-Origin": "*",
 6 |     "Access-Control-Allow-Methods": "POST, OPTIONS",
 7 |     "Access-Control-Allow-Headers": "Content-Type, Authorization",
 8 |   },
 9 | };
10 | 
11 | const baseUrl = process.env.VERCEL_PROJECT_PRODUCTION_URL
12 | ? // Vercel auto-populates this environment variable
13 |   `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
14 | : // Netlify auto-populates this environment variable
15 |   process.env.URL;
16 | 
17 | /*
18 |   This endpoint is for the Web Previews DatoCMS plugin:
19 |   https://www.datocms.com/marketplace/plugins/i/datocms-plugin-web-previews
20 | 
21 |   After installing the plugin on the project, insert the following frontend settings:
22 | 
23 |   Name: Production Website
24 |   URL: <YOUR_WEBSITE>/api/preview-links
25 | */
26 | 
27 | const findUrlForItem = ({ item, itemType }) => {
28 |   switch (itemType.attributes.api_key) {
29 |     case 'post':
30 |       return `/posts/${item.attributes.slug}`;
31 |     default:
32 |       return null;
33 |   }
34 | };
35 | 
36 | export async function OPTIONS(request) {
37 |   return NextResponse.json(
38 |     { success: true },
39 |     corsInitOptions,
40 |   );
41 | }
42 | 
43 | export async function POST(request) {
44 |   const requestBody = await request.json();
45 |   const url = findUrlForItem(requestBody);
46 | 
47 |   if (!url) {
48 |     return NextResponse.json({ previewLinks: [] }, corsInitOptions);
49 |   }
50 | 
51 |   const previewLinks = [
52 |     {
53 |       label: 'Published version',
54 |       url: `${baseUrl}${url}`,
55 |     },
56 |     {
57 |       label: 'Draft version',
58 |       url: `${baseUrl}/api/draft?redirect=${url}&secret=${
59 |         process.env.NEXT_DATOCMS_PREVIEW_SECRET || ''
60 |       }`,
61 |     },
62 |   ];
63 | 
64 |   return NextResponse.json({ previewLinks }, corsInitOptions);
65 | };
66 | 


--------------------------------------------------------------------------------
/app/page.js:
--------------------------------------------------------------------------------
 1 | import { draftMode } from "next/headers";
 2 | import { toNextMetadata } from "react-datocms";
 3 | 
 4 | import { performRequest } from "@/lib/datocms";
 5 | import { metaTagsFragment, responsiveImageFragment } from "@/lib/fragments";
 6 | 
 7 | import { DraftPostIndex } from "@/components/draft-post-index";
 8 | import { PostIndex } from "@/components/post-index";
 9 | 
10 | const PAGE_CONTENT_QUERY = `
11 |   {
12 |     site: _site {
13 |       favicon: faviconMetaTags {
14 |         ...metaTagsFragment
15 |       }
16 |     }
17 |     blog {
18 |       seo: _seoMetaTags {
19 |         ...metaTagsFragment
20 |       }
21 |     }
22 |     allPosts(orderBy: date_DESC, first: 20) {
23 |       title
24 |       slug
25 |       excerpt
26 |       date
27 |       coverImage {
28 |         responsiveImage(imgixParams: {fm: jpg, fit: crop, w: 2000, h: 1000 }) {
29 |           ...responsiveImageFragment
30 |         }
31 |       }
32 |       author {
33 |         name
34 |         picture {
35 |           responsiveImage(imgixParams: {fm: jpg, fit: crop, w: 100, h: 100, sat: -100}) {
36 |             ...responsiveImageFragment
37 |           }
38 |         }
39 |       }
40 |     }
41 |   }
42 | 
43 |   ${metaTagsFragment}
44 |   ${responsiveImageFragment}
45 | `;
46 | 
47 | function getPageRequest() {
48 |   const { isEnabled } = draftMode();
49 | 
50 |   return { query: PAGE_CONTENT_QUERY, includeDrafts: isEnabled };
51 | }
52 | 
53 | export async function generateMetadata() {
54 |   const { site, blog } = await performRequest(getPageRequest());
55 | 
56 |   return toNextMetadata([...site.favicon, ...blog.seo]);
57 | }
58 | 
59 | export default async function Page() {
60 |   const { isEnabled } = draftMode();
61 | 
62 |   const pageRequest = getPageRequest();
63 |   const data = await performRequest(pageRequest);
64 | 
65 |   if (isEnabled) {
66 |     return (
67 |       <DraftPostIndex
68 |         subscription={{
69 |           ...pageRequest,
70 |           initialData: data,
71 |           token: process.env.NEXT_DATOCMS_API_TOKEN,
72 |           environment: process.env.NEXT_DATOCMS_ENVIRONMENT || null,
73 |         }}
74 |       />
75 |     );
76 |   }
77 | 
78 |   return <PostIndex data={data} />;
79 | }
80 | 


--------------------------------------------------------------------------------
/app/api/post-install/route.js:
--------------------------------------------------------------------------------
 1 | import { buildClient } from "@datocms/cma-client-node";
 2 | import { NextResponse } from "next/server";
 3 | 
 4 | const corsInitOptions = {
 5 |   headers: {
 6 |     "Access-Control-Allow-Origin": "*",
 7 |     "Access-Control-Allow-Methods": "POST, OPTIONS",
 8 |     "Access-Control-Allow-Headers": "Content-Type, Authorization",
 9 |   },
10 | };
11 | 
12 | const baseUrl = process.env.VERCEL_PROJECT_PRODUCTION_URL
13 |   ? // Vercel auto-populates this environment variable
14 |     `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
15 |   : // Netlify auto-populates this environment variable
16 |     process.env.URL;
17 | 
18 | async function installWebPreviewsPlugin(client) {
19 |   const webPreviewsPlugin = await client.plugins.create({
20 |     package_name: "datocms-plugin-web-previews",
21 |   });
22 | 
23 |   await client.plugins.update(webPreviewsPlugin, {
24 |     parameters: {
25 |       frontends: [
26 |         { name: "Production", previewWebhook: `${baseUrl}/api/preview-links` },
27 |       ],
28 |       startOpen: true,
29 |     },
30 |   });
31 | }
32 | 
33 | async function installSeoReadabilityPlugin(client) {
34 |   const seoReadabilityPlugin = await client.plugins.create({
35 |     package_name: "datocms-plugin-seo-readability-analysis",
36 |   });
37 | 
38 |   await client.plugins.update(seoReadabilityPlugin, {
39 |     parameters: {
40 |       htmlGeneratorUrl: `${baseUrl}/api/seo-readability-metadata`,
41 |       autoApplyToFieldsWithApiKey: "seo_readability_analysis",
42 |     },
43 |   });
44 | }
45 | 
46 | /*
47 |   This endpoint is called right after bootstrapping the Starter project...
48 |   it can be removed afterwards!
49 | */
50 | 
51 | export async function OPTIONS(request) {
52 |   return NextResponse.json(
53 |     { success: true },
54 |     corsInitOptions,
55 |   );
56 | }
57 | 
58 | export async function POST(request) {
59 |   const requestBody = await request.json();
60 |   const client = buildClient({ apiToken: requestBody.datocmsApiToken });
61 | 
62 |   try {
63 |     await Promise.all([
64 |       installWebPreviewsPlugin(client),
65 |       installSeoReadabilityPlugin(client),
66 |     ]);
67 | 
68 |     return NextResponse.json({ success: true }, corsInitOptions);
69 |   } catch (error) {
70 |     return NextResponse.json(
71 |       {
72 |         error: error.message,
73 |         request: error.request,
74 |         response: error.response,
75 |       },
76 |       { ...corsInitOptions, status: 500 }
77 |     );
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/app/api/seo-readability-metadata/route.js:
--------------------------------------------------------------------------------
  1 | import { buildClient } from "@datocms/cma-client-node";
  2 | import { JSDOM } from "jsdom";
  3 | import { NextResponse } from "next/server";
  4 | import { draftMode, cookies } from "next/headers";
  5 | 
  6 | const corsInitOptions = {
  7 |   headers: {
  8 |     "Access-Control-Allow-Origin": "*",
  9 |     "Access-Control-Allow-Methods": "POST, OPTIONS",
 10 |     "Access-Control-Allow-Headers": "Content-Type, Authorization",
 11 |   },
 12 | };
 13 | 
 14 | const baseUrl = process.env.VERCEL_PROJECT_PRODUCTION_URL
 15 |   ? // Vercel auto-populates this environment variable
 16 |     `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
 17 |   : // Netlify auto-populates this environment variable
 18 |     process.env.URL;
 19 | 
 20 | const findSlugAndUrlForItem = (item, itemTypeApiKey) => {
 21 |   switch (itemTypeApiKey) {
 22 |     case "post":
 23 |       return [item.slug, `/posts/${item.slug}`];
 24 |     default:
 25 |       return null;
 26 |   }
 27 | };
 28 | 
 29 | export async function OPTIONS(request) {
 30 |   return NextResponse.json({ success: true }, corsInitOptions);
 31 | }
 32 | 
 33 | export async function GET(request) {
 34 |   const { searchParams } = new URL(request.url);
 35 | 
 36 |   const client = buildClient({
 37 |     apiToken: process.env.NEXT_DATOCMS_API_TOKEN,
 38 |     environment: searchParams.get("sandboxEnvironmentId"),
 39 |   });
 40 | 
 41 |   const item = await client.items.find(searchParams.get("itemId"));
 42 | 
 43 |   const result = findSlugAndUrlForItem(
 44 |     item,
 45 |     searchParams.get("itemTypeApiKey")
 46 |   );
 47 | 
 48 |   if (!result) {
 49 |     return NextResponse.json(
 50 |       {
 51 |         error: `Record #${searchParams.get(
 52 |           "itemId"
 53 |         )} does not have a route on the frontend!`,
 54 |       },
 55 |       { ...corsInitOptions, status: 422 }
 56 |     );
 57 |   }
 58 | 
 59 |   const [slug, url] = result;
 60 | 
 61 |   // let's start a temporary Next.js Draft Mode just to get the authentication cookies
 62 | 
 63 |   draftMode().enable();
 64 | 
 65 |   const cookie = cookies()
 66 |     .getAll("Set-Cookie")
 67 |     .map((cookie) => cookie.value.split(";")[0])
 68 |     .join(";");
 69 | 
 70 |   draftMode().disable();
 71 | 
 72 |   // final step is to get the HTML of the webpage associated with the record
 73 |   // and return it to the client
 74 | 
 75 |   const response = await fetch(new URL(url, baseUrl).toString(), {
 76 |     headers: { cookie },
 77 |   });
 78 | 
 79 |   const body = await response.text();
 80 | 
 81 |   const { document } = new JSDOM(body).window;
 82 | 
 83 |   const contentEl = document.getElementById("main-content");
 84 | 
 85 |   if (!contentEl) {
 86 |     return NextResponse.json(
 87 |       {
 88 |         error: `Page ${url} does not have an element with ID "main-content"!`,
 89 |       },
 90 |       { ...corsInitOptions, status: 422 }
 91 |     );
 92 |   }
 93 | 
 94 |   const content = contentEl.innerHTML;
 95 |   const locale = document.querySelector("html").getAttribute("lang") || "en";
 96 |   const title = document.querySelector("title").textContent;
 97 |   const description = document
 98 |     .querySelector('meta[name="description"]')
 99 |     .getAttribute("content");
100 | 
101 |   return NextResponse.json(
102 |     {
103 |       locale,
104 |       slug,
105 |       permalink: url,
106 |       title,
107 |       description,
108 |       content,
109 |     },
110 |     corsInitOptions
111 |   );
112 | }
113 | 


--------------------------------------------------------------------------------
/app/posts/[slug]/page.js:
--------------------------------------------------------------------------------
  1 | import { draftMode } from 'next/headers'
  2 | import { toNextMetadata } from "react-datocms";
  3 | 
  4 | import { performRequest } from "@/lib/datocms";
  5 | import { metaTagsFragment, responsiveImageFragment } from "@/lib/fragments";
  6 | 
  7 | import { DraftPostPage } from '@/components/draft-post-page';
  8 | import { PostPage } from '@/components/post-page';
  9 | 
 10 | export async function generateStaticParams() {
 11 |   const { allPosts } = await performRequest({ query: `{ allPosts { slug } }` });
 12 | 
 13 |   return allPosts.map(({ slug }) => slug);
 14 | }
 15 | 
 16 | const PAGE_CONTENT_QUERY = `
 17 |   query PostBySlug($slug: String) {
 18 |     site: _site {
 19 |       favicon: faviconMetaTags {
 20 |         ...metaTagsFragment
 21 |       }
 22 |     }
 23 |     post(filter: {slug: {eq: $slug}}) {
 24 |       seo: _seoMetaTags {
 25 |         ...metaTagsFragment
 26 |       }
 27 |       title
 28 |       slug
 29 |       content {
 30 |         value
 31 |         blocks {
 32 |           __typename
 33 |           ...on ImageBlockRecord {
 34 |             id
 35 |             image {
 36 |               responsiveImage(imgixParams: {fm: jpg, fit: crop, w: 2000, h: 1000 }) {
 37 |                 ...responsiveImageFragment
 38 |               }
 39 |             }
 40 |           }
 41 |         }
 42 |       }
 43 |       date
 44 |       ogImage: coverImage{
 45 |         url(imgixParams: {fm: jpg, fit: crop, w: 2000, h: 1000 })
 46 |       }
 47 |       coverImage {
 48 |         responsiveImage(imgixParams: {fm: jpg, fit: crop, w: 2000, h: 1000 }) {
 49 |           ...responsiveImageFragment
 50 |         }
 51 |       }
 52 |       author {
 53 |         name
 54 |         picture {
 55 |           responsiveImage(imgixParams: {fm: jpg, fit: crop, w: 100, h: 100, sat: -100}) {
 56 |             ...responsiveImageFragment
 57 |           }
 58 |         }
 59 |       }
 60 |     }
 61 | 
 62 |     morePosts: allPosts(orderBy: date_DESC, first: 2, filter: {slug: {neq: $slug}}) {
 63 |       title
 64 |       slug
 65 |       excerpt
 66 |       date
 67 |       coverImage {
 68 |         responsiveImage(imgixParams: {fm: jpg, fit: crop, w: 2000, h: 1000 }) {
 69 |           ...responsiveImageFragment
 70 |         }
 71 |       }
 72 |       author {
 73 |         name
 74 |         picture {
 75 |           responsiveImage(imgixParams: {fm: jpg, fit: crop, w: 100, h: 100, sat: -100}) {
 76 |             ...responsiveImageFragment
 77 |           }
 78 |         }
 79 |       }
 80 |     }
 81 |   }
 82 | 
 83 |   ${responsiveImageFragment}
 84 |   ${metaTagsFragment}
 85 | `;
 86 | 
 87 | function getPageRequest(slug) {
 88 |   const { isEnabled } = draftMode();
 89 | 
 90 |   return { query: PAGE_CONTENT_QUERY, includeDrafts: isEnabled, variables: { slug } };
 91 | }
 92 | 
 93 | export async function generateMetadata({ params }) {
 94 |   const { site, post } = await performRequest(getPageRequest(params.slug))
 95 | 
 96 |   return toNextMetadata([ ...site.favicon, ...post.seo ])
 97 | }
 98 | 
 99 | export default async function Page({ params }) {
100 |   const { isEnabled } = draftMode();
101 | 
102 |   const pageRequest = getPageRequest(params.slug);
103 |   const data = await performRequest(pageRequest);
104 | 
105 |   if (isEnabled) {
106 |     return (
107 |       <DraftPostPage
108 |         subscription={{
109 |           ...pageRequest,
110 |           initialData: data,
111 |           token: process.env.NEXT_DATOCMS_API_TOKEN,
112 |           environment: process.env.NEXT_DATOCMS_ENVIRONMENT || null,
113 |         }}
114 |       />
115 |     );
116 |   }
117 | 
118 |   return <PostPage data={data} />;
119 | }
120 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <!--datocms-autoinclude-header start-->
  2 | 
  3 | <a href="https://www.datocms.com/"><img src="https://www.datocms.com/images/full_logo.svg" height="60"></a>
  4 | 
  5 | 👉 [Visit the DatoCMS homepage](https://www.datocms.com) or see [What is DatoCMS?](#what-is-datocms)
  6 | 
  7 | ---
  8 | 
  9 | <!--datocms-autoinclude-header end-->
 10 | 
 11 | # A Blog example using Next.js and DatoCMS
 12 | 
 13 | This example showcases a Next.js Blog using [DatoCMS](https://www.datocms.com/) as the data source. It fully supports [Preview Mode](https://www.datocms.com/docs/next-js/setting-up-next-js-preview-mode) with [DatoCMS real-time updates](https://www.datocms.com/docs/next-js/real-time-updates).
 14 | 
 15 | The purpose of this repo is to have a quick start reference that can be set up with the "one-click" button below.
 16 | 
 17 | ## Demo
 18 | 
 19 | Have a look at the end result live:
 20 | 
 21 | ### [https://nextjs-demo-bay.vercel.app/](https://nextjs-demo-bay.vercel.app/)
 22 | 
 23 | ## How to use
 24 | 
 25 | ### Quick start
 26 | 
 27 | 1. [Create an account on DatoCMS](https://datocms.com).
 28 | 
 29 | 2. Make sure that you have set up the [Github integration on Vercel](https://vercel.com/docs/git/vercel-for-github).
 30 | 
 31 | 3. Let DatoCMS set everything up for you clicking this button:
 32 | 
 33 | [![Deploy with DatoCMS](https://dashboard.datocms.com/deploy/button.svg)](https://dashboard.datocms.com/deploy?repo=datocms/nextjs-demo)
 34 | 
 35 | ### Local setup
 36 | 
 37 | Once the setup of the project and repo is done, clone the repo locally.
 38 | 
 39 | #### Set up environment variables
 40 | 
 41 | In your DatoCMS' project, go to the **Settings** menu at the top and click **API tokens**.
 42 | 
 43 | Then click **Read-only API token** and copy the token.
 44 | 
 45 | Next, copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git):
 46 | 
 47 | ```bash
 48 | cp .env.local.example .env.local
 49 | ```
 50 | 
 51 | Then set each variable inside `.env.local`:
 52 | 
 53 | - `NEXT_DATOCMS_API_TOKEN` should be the API token you just copied.
 54 | - `NEXT_DATOCMS_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for the Preview Mode](https://www.datocms.com/docs/next-js/setting-up-next-js-preview-mode).
 55 | 
 56 | Your `.env.local` file should look like this:
 57 | 
 58 | ```bash
 59 | NEXT_DATOCMS_API_TOKEN=...
 60 | NEXT_DATOCMS_PREVIEW_SECRET=...
 61 | ```
 62 | 
 63 | #### Run your project locally
 64 | 
 65 | ```bash
 66 | npm install
 67 | npm run dev
 68 | ```
 69 | 
 70 | Your blog should be up and running on [http://localhost:3000](http://localhost:3000)!
 71 | 
 72 | #### Try preview mode
 73 | 
 74 | On DatoCMS, go to one of the posts you've created and:
 75 | 
 76 | - **Update the title**. For example, you can add `[Draft]` in front of the title.
 77 | - Click **Save**, but **DO NOT** click **Publish**. By doing this, the post will be in the draft state.
 78 | 
 79 | (If it doesn't become draft, you need to go to the model settings for `Post`, go to **Additional Settings**, and turn on **Enable draft/published system**.)
 80 | 
 81 | Now, if you go to the post page on localhost, you won't see the updated title. However, if you use the **Preview Mode**, you'll be able to see the change ([Documentation](https://www.datocms.com/docs/next-js/setting-up-next-js-preview-mode)).
 82 | 
 83 | To enable the Preview Mode, go to this URL:
 84 | 
 85 | ```
 86 | http://localhost:3000/api/draft?secret=<secret>
 87 | ```
 88 | 
 89 | - `<secret>` should be the string you entered for `NEXT_DATOCMS_PREVIEW_SECRET`.
 90 | - `<slug>` should be the post's `slug` attribute (you can check on DatoCMS).
 91 | 
 92 | You should now be able to see the updated title. To exit the preview mode, you can click **Click here to exit preview mode** at the top.
 93 | 
 94 | <!--datocms-autoinclude-footer start-->
 95 | 
 96 | ---
 97 | 
 98 | # What is DatoCMS?
 99 | 
100 | <a href="https://www.datocms.com/"><img src="https://www.datocms.com/images/full_logo.svg" height="60" alt="DatoCMS - The Headless CMS for the Modern Web"></a>
101 | 
102 | [DatoCMS](https://www.datocms.com/) is the REST & GraphQL Headless CMS for the modern web.
103 | 
104 | Trusted by over 25,000 enterprise businesses, agencies, and individuals across the world, DatoCMS users create online content at scale from a central hub and distribute it via API. We ❤️ our [developers](https://www.datocms.com/team/best-cms-for-developers), [content editors](https://www.datocms.com/team/content-creators) and [marketers](https://www.datocms.com/team/cms-digital-marketing)!
105 | 
106 | **Why DatoCMS?**
107 | 
108 | - **API-First Architecture**: Built for both REST and GraphQL, enabling flexible content delivery
109 | - **Just Enough Features**: We believe in keeping things simple, and giving you [the right feature-set tools](https://www.datocms.com/features) to get the job done
110 | - **Developer Experience**: First-class TypeScript support with powerful developer tools
111 | 
112 | **Getting Started:**
113 | 
114 | - ⚡️ [Create Free Account](https://dashboard.datocms.com/signup) - Get started with DatoCMS in minutes
115 | - 🔖 [Documentation](https://www.datocms.com/docs) - Comprehensive guides and API references
116 | - ⚙️ [Community Support](https://community.datocms.com/) - Get help from our team and community
117 | - 🆕 [Changelog](https://www.datocms.com/product-updates) - Latest features and improvements
118 | 
119 | **Official Libraries:**
120 | 
121 | - [**Content Delivery Client**](https://github.com/datocms/cda-client) - TypeScript GraphQL client for content fetching
122 | - [**REST API Clients**](https://github.com/datocms/js-rest-api-clients) - Node.js/Browser clients for content management
123 | - [**CLI Tools**](https://github.com/datocms/cli) - Command-line utilities for schema migrations (includes [Contentful](https://github.com/datocms/cli/tree/main/packages/cli-plugin-contentful) and [WordPress](https://github.com/datocms/cli/tree/main/packages/cli-plugin-wordpress) importers)
124 | 
125 | **Official Framework Integrations**
126 | 
127 | Helpers to manage SEO, images, video and Structured Text coming from your DatoCMS projects:
128 | 
129 | - [**React Components**](https://github.com/datocms/react-datocms)
130 | - [**Vue Components**](https://github.com/datocms/vue-datocms)
131 | - [**Svelte Components**](https://github.com/datocms/datocms-svelte)
132 | - [**Astro Components**](https://github.com/datocms/astro-datocms)
133 | 
134 | **Additional Resources:**
135 | 
136 | - [**Plugin Examples**](https://github.com/datocms/plugins) - Example plugins we've made that extend the editor/admin dashboard
137 | - [**Starter Projects**](https://www.datocms.com/marketplace/starters) - Example website implementations for popular frameworks
138 | - [**All Public Repositories**](https://github.com/orgs/datocms/repositories?q=&type=public&language=&sort=stargazers)
139 | 
140 | <!--datocms-autoinclude-footer end-->
141 | 


--------------------------------------------------------------------------------