sanity-io / sanity-template-nextjs-landing-pages

A Sanity powered landing page builder in Next.js for https://sanity.io/create

Next.js landing pages

Live demo

SEO friendly page builder in React.js. Heroes, sign-up forms and calls to action.

The template contains both a Sanity Studio and a front-end in Next.js. Both are deployed on Vercel.

Deployed your own with sanity.io/create.

You can also deploy with Vercel:

What you have

• A dynamic frontend with Next.js
• Structured content using Sanity.io
• Global deployment on Vercel

Deploy changes

Vercel automatically deploys new changes commited to master on GitHub. If you want to change deployment branch, do so in Customizing the Production Branch on Verce;.

Stuck? Get help

Join Sanity’s developer community or ping us on twitter.

Running the front-end

You'll need to create a .env file to store a few environment variables that Next will use to pull data from the Sanity API.

NEXT_PUBLIC_SANITY_PROJECT_ID=<YOUR-PROJECT-ID>
NEXT_PUBLIC_SANITY_DATASET=<YOUR-DATASET-NAME>
SANITY_STUDIO_API_PROJECT_ID=<YOUR-PROJECT-ID>
SANITY_STUDIO_API_DATASET=<YOUR-DATASET-NAME>

For instance, your file should look like this:

NEXT_PUBLIC_SANITY_PROJECT_ID=abcdefgh
NEXT_PUBLIC_SANITY_DATASET=production
SANITY_STUDIO_API_PROJECT_ID=abcdefgh
SANITY_STUDIO_API_DATASET=production

To find these, visit https://manage.sanity.io

The Project ID is displayed once you select your project. It is an alphanumeric 8-character string.

The dataset is the name of the dataset that you want to use. For instance "production".

Once those env variables are in place, you can run the following commands to get Next's development server up and running:

npm install

# Run the frontend
npm run dev

# Run the Studio
npm run start:sanity

The blog will be running at http://localhost:3000, the Studio will run at http://localhost:3333.

sanity-template-nextjs-landing-pages's Issues

Update template to use getStaticProps over getInitialProps

Description

NextJS static site optimization is disabled site wide when getInitialProps is used in _app file. Would be cool to see this template use getStaticProps so people using this template could reap the benefits on NextJS SSG.

Further more feels like using class components are a bit out of date. I have tried refactoring this a couple times with no avail. Would also be cool to see this refactored into functional components.

I am not an expert on the NextJS APIs so have been having a hard time finding a way to access all those same props the same way as the class version.

Acceptance Criteria

• Refactor _app file to use getStaticProps over getInitialProps.
• Use functional components/hooks over class based hooks in _app

Config Object

Just wondering what this config object is

sanity-template-nextjs-landing-pages/template/web/pages/[[...slug]].js

Line 86 in 3ec5538

config = {},

Mailchimp.js

How do I get this functional?

Import of components' css not working

I have tried to use several different components to create a carousel but none have been able to work properly.
Initially I had problems with importing css for the component
import "react-multi-carousel/lib/styles.css";
That caused an error which I fixed by adding url: false, to the next.config.js file
After that the component loads but with no styling at all.
The classes are there on the elements but with no css.

These are 2 of the many carousels I have tried to get working with this template but failed.

https://github.com/brainhubeu/react-carousel
https://github.com/YIZHUANG/react-multi-carousel

what is global-config?

Hi!
I am new to sanity and just wondering what reference the global-config in the groq query is? Is this the name of the site configuration document?

Add Tailwind CSS to this template

Hi, i am trying to add TailwindCSS to this template but i haven't succeeded yet

I've installed: "autoprefixer": "^9.8.6", "postcss": "^7.0.35", and "tailwindcss": "^2.0.1-compat" within the web folder.

also i've created the file tailwind.css within /web/styles folder.

Then i imported the css file on /web/pages_app.js

Finally i configured the postcss.config.file within the web folder.

Still not working.

I have tried many changes on the postscss.config.js file such as:

Without any succes. I am not getting any errors, it's just that the classes are being added to the html, but the styles are not being applied. Hope someone can help. Thanks in advanced.

Element type is invalid in _document.js

I've created the _document.js as suggested in the template but I get this error in the console:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

The code is this:

import React from 'react'
import Document, {Html, Head, Main, NextScript} from 'next/document'
import client from '../client'

export default class MyDocument extends Document {
static async getInitialProps (ctx) {
const initialProps = await Document.getInitialProps(ctx)
return client.fetch('*[_id == "global-config"] {lang}.lang[0]').then(lang => {
return {...initialProps, lang}
})
}

render () {
return (

  <Html lang={this.props.lang || 'en'}>
    <Head />
    <body>
      <Main />
      <NextScript />
    </body>
  </Html>
 
)

}
}

Has anyone had this issue?And if yes , how did you solve it?Thank you in advance!

Build Hangs on npm run dev

build studio/plugins/dashboard-widget-structure-menu/src/components sat for almost 10 minutes

Alexs-Coding-Machine:sanity-template-nextjs-landing-pages ajonp$ npm run dev

> sanity-template-nextjs-landing-pages@ dev /Users/ajonp/Downloads/sanity-template-nextjs-landing-pages
> sanity-template watch --template-values template-values-development.json

build .editorconfig
build lerna.json
build package-lock.json
build .gitignore
build README.md
build package.json
build studio/.eslintrc.js
build studio/.gitignore
build studio/dashboardConfig.js
build studio/README.md
build studio/.prettierrc
build studio/deskStructure.js
build studio/netlify.toml
build studio/package-lock.json
build studio/package.json
build studio/sanity.json
build web/.eslintignore
build web/.eslintrc.js
build web/.gitignore
build web/client.js
build web/exportSitemap.js
build web/next.config.js
build web/.prettierrc
build web/package.json
build web/package-lock.json
build web/postcss.config.js
build studio/config/.checksums
build studio/plugins/.gitkeep
build studio/static/.gitkeep
build studio/static/favicon.ico
build studio/schemas/schema.js
build web/components/Cta.js
build web/components/Cta.module.css
build web/components/EmbedHTML.js
build web/components/Figure.js
build web/components/Figure.module.css
build web/components/Footer.js
build web/components/Footer.module.css
build web/components/Header.js
build web/components/Header.module.css
build web/components/Layout.js
build web/components/RenderSections.js
build web/components/SimpleBlockContent.js
build web/components/serializers.js
build web/pages/CustomPage.js
build web/pages/LandingPage.js
build web/pages/_app.js
build web/pages/_document.js
build web/pages/index.js
build web/styles/custom-media.css
build web/styles/custom-properties.css
build web/styles/layout.css
build web/styles/shared.module.css
build studio/config/@sanity/data-aspects.json
build studio/config/@sanity/default-layout.json
build studio/config/@sanity/default-login.json
build studio/schemas/documents/page.js
build studio/schemas/documents/route.js
build studio/schemas/documents/siteConfig.js
build studio/plugins/dashboard-widget-structure-menu/sanity.json
build studio/schemas/objects/cta.js
build studio/schemas/objects/embedHTML.js
build studio/schemas/objects/figure.js
build studio/schemas/objects/hero.js
build studio/schemas/objects/imageSection.js
build studio/schemas/objects/internalLink.js
build studio/schemas/objects/link.js
build studio/schemas/objects/mailchimp.js
build studio/schemas/objects/portableText.js
build studio/schemas/objects/simplePortableText.js
build studio/schemas/objects/textSection.js
build web/components/sections/Hero.js
build web/components/sections/Hero.module.css
build web/components/sections/ImageSection.js
build web/components/sections/ImageSection.module.css
build web/components/sections/Mailchimp.js
build web/components/sections/Mailchimp.module.css
build web/components/sections/TextSection.js
build web/components/sections/TextSection.module.css
build web/components/sections/index.js
build web/components/icons/Hamburger.js
build studio/plugins/dashboard-widget-structure-menu/src/props.js
build studio/plugins/dashboard-widget-structure-menu/src/widget.js
build studio/plugins/dashboard-widget-structure-menu/src/lib/structure.js
build studio/plugins/dashboard-widget-structure-menu/src/components/StructureMenuWidget.css
build studio/plugins/dashboard-widget-structure-menu/src/components/index.js
build studio/plugins/dashboard-widget-structure-menu/src/components/StructureMenuWidget.js
^C

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (github>sanity-io/renovate-presets:sanity-template)

Failed prop type on loading the front-end (localhost:3000)

Hello, I started using this repo/template and when I try to access the front-end after running npm install and npm run dev in the root folder, I am receiving those warnings, even without changing anything in the code:

next-dev.js?3515:32 Warning: Failed prop type: Invalid prop navItems[0].slugof typeobjectsupplied toHeader, expected an array. at Header (webpack-internal:///./components/Header.js:130:9) at WithRouterWrapper (webpack-internal:///./node_modules/next/dist/client/with-router.js:18:34) at div at Layout (webpack-internal:///./components/Layout.js:22:24) at LandingPage (webpack-internal:///./pages/[[...slug]].js:29:24) at App (webpack-internal:///./pages/_app.js:172:9) at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20584) at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23125) at Container (webpack-internal:///./node_modules/next/dist/client/index.js:359:9) at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:793:26) at Root (webpack-internal:///./node_modules/next/dist/client/index.js:915:27)

The same happens for the footer. Did anybody have the same issue?
Thanks.

Deploying this to Netlify fails

8:51:00 AM: npm ERR! code ERESOLVE
8:51:00 AM: npm ERR! ERESOLVE could not resolve
8:51:00 AM: npm ERR!
8:51:00 AM: npm ERR! While resolving: [email protected]
8:51:00 AM: npm ERR! Found: [email protected]
8:51:00 AM: npm ERR! node_modules/eslint
8:51:00 AM: npm ERR! dev eslint@"^8.8.0" from the root project
8:51:00 AM: npm ERR! peer eslint@"^6.0.0 || ^7.0.0 || ^8.0.0" from @typescript-eslint/[email protected]
8:51:00 AM: npm ERR! node_modules/@typescript-eslint/parser
8:51:00 AM: npm ERR! @typescript-eslint/parser@"^5.0.0" from [email protected]
8:51:00 AM: npm ERR! node_modules/eslint-config-next
8:51:00 AM: npm ERR! dev eslint-config-next@"^12.0.10" from the root project
8:51:00 AM: npm ERR! 12 more (eslint-config-next, eslint-config-prettier, ...)
8:51:00 AM: npm ERR!
8:51:00 AM: npm ERR! Could not resolve dependency:
8:51:00 AM: npm ERR! peer eslint@"^7.12.1" from [email protected]
8:51:00 AM: npm ERR! node_modules/eslint-config-standard
8:51:00 AM: npm ERR! dev eslint-config-standard@"^16.0.3" from the root project
8:51:00 AM: npm ERR!

Annotations

Describe the bug

Hey, I implemented link, internalLink and portableText like described in your example: sanity-template-nextjs-landing-pages.

If I edit the following in studio:

I get this back:

_key: "5c69a0901ef51"
_type: "span"
marks: Array(1)
0: "5da972bc4fca"
length: 1
__proto__: Array(0)
text: "[email protected]"
__proto__: Object

Expected behaviour

I expected to get something of type url with a href prop and not a type span with a text prop. That makes it very difficult to render the data correctly in my app. I also tried to render the data by marks prop, but this number changes sometimes.

Which versions of Sanity are you using?

"@sanity/base": "^1.149.5",
"@sanity/components": "^1.149.5",
"@sanity/core": "^1.149.4",
"@sanity/default-layout": "^1.149.5",
"@sanity/default-login": "^1.149.0",
"@sanity/desk-tool": "^1.149.5",
"@sanity/vision": "^1.149.0",

It is also possible that I have forgotten a step, but maybe it is also a bug.

internal link not working

i have the default configuration for internal link on the simple block content , external link are working finr but on the intrnal link are render oas span only.

Web directory conflicting peer dependencies error

Attempting to run 'npm install' in the /web directory fails to install and results in the following output:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"^8.8.0" from the root project
npm ERR!   peer eslint@"^6.0.0 || ^7.0.0 || ^8.0.0" from @typescript-eslint/[email protected]
npm ERR!   node_modules/@typescript-eslint/parser
npm ERR!     @typescript-eslint/parser@"^5.0.0" from [email protected]
npm ERR!     node_modules/eslint-config-next
npm ERR!       dev eslint-config-next@"^12.0.10" from the root project
npm ERR!   12 more (eslint-config-next, eslint-config-prettier, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^7.12.1" from [email protected]
npm ERR! node_modules/eslint-config-standard
npm ERR!   dev eslint-config-standard@"^16.0.3" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/eslint
npm ERR!   peer eslint@"^7.12.1" from [email protected]
npm ERR!   node_modules/eslint-config-standard
npm ERR!     dev eslint-config-standard@"^16.0.3" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/rturner/.npm/eresolve-report.txt for a full report.

Vercel deployment

Is there any chance for you guys to add deploying to Vercel?

Add previews to this example

I have a feature request. Can you add previews to this example, please?

In my experience, a preview feature is often a requirement in any headless CMS project. In Sanity, it requires touching quite a few files and I'd love to see what you consider best practices.

What I'd like to see:

• previewing drafts
• where link resolver is maintained in web vs studio (if used)