### Next.js 16 Landing Page Demonstration

## Marketing Website

### Offers typed GraphQL queries, Tailwind, multi-language, visual editing with real-time updates in preview mode, SEO/Readability analysis, and much more

[

**Want to create your own starter project?** Learn how to do that in our documentation!

](https://www.datocms.com/docs/general-concepts/project-starters-and-templates.md#generate-a-project-starter-button)

## A Company Website Demo using Next.js 16 and DatoCMS

This example showcases a TypeScript Next.js 16 website with App Router (app) — using [DatoCMS](https://www.datocms.com/.md) as the data source.

## Next.js 16 Features

This demo takes advantage of the latest Next.js 16 features.

It uses GraphQL CodeGen to type all of the requests coming from DatoCMS automatically: [See how it works here](https://www.datocms.com/blog/how-to-generate-typescript-types-from-graphql.md)

## DatoCMS Integration

This project uses the official [`@datocms/cda-client`](https://github.com/datocms/cda-client) package for querying the DatoCMS Content Delivery API. This lightweight TypeScript client provides:

-   Full TypeScript support with `TypedDocumentNode`
-   Automatic retry on rate limits
-   Support for draft content previews
-   Seamless integration with Next.js caching

Additionally, [`react-datocms`](https://github.com/datocms/react-datocms) is used for real-time updates, responsive images, and SEO metadata handling.

## Demo

Have a look at the end result live:

### [https://company-website-demo-preview.vercel.app/](https://company-website-demo-preview.vercel.app/)

## How to use

### Quick start

1.  [Create an account on DatoCMS](https://datocms.com/).
    
2.  Make sure that you have set up the [Github integration on Vercel](https://vercel.com/docs/git/vercel-for-github).
    
3.  Let DatoCMS set everything up for you clicking this button below:
    

[(Image content)](https://dashboard.datocms.com/deploy?repo=marcelofinamorvieira%2Fsaas-starter%3Amain)

### Local setup

Once the setup of the project and repo is done, clone the repo locally.

#### Set up environment variables

In your DatoCMS' project, go to the **Settings** menu at the top and click **API tokens**.

Then click **Read-only API token** and copy the token.

Next, copy the `.env.example` file in this directory to `.env` (which will be ignored by Git):

```bash
cp .env.local.sample .env.local
```

and set the `DATOCMS_READONLY_API_TOKEN` variable as the API token you just copied.

Also then set a secret token that is being used for WebPreviews, SEO Previews and Cache invalidation:

```plaintext
URL=http://localhost:3000SEO_SECRET_TOKEN=superSecretTokenDRAFT_SECRET_TOKEN=superSecretTokenCACHE_INVALIDATION_SECRET_TOKEN=superSecretToken
```

#### Run your project locally

```bash
pnpm installpnpm dev
```

Your blog should be up and running on [http://localhost:3000](http://localhost:3000/)!

## VS Code

It's strongly suggested to install the [GraphQL: Language Feature Support](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) extension, to get autocomplete suggestions, validation against schema, and many more niceties when working with your GraphQL queries.