Last active
June 25, 2020 09:19
-
-
Save hypervillain/4249f98e1cbd45b62fd7a23d0b8f26ee to your computer and use it in GitHub Desktop.
Setup Next.js project with SliceMachine + essential slices
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Client } from '../prismic' | |
| import SliceZone from 'next-slicezone' | |
| import { useGetStaticProps, useGetStaticPaths } from 'next-slicezone/hooks' | |
| import resolver from '../sm-resolver.js' | |
| const Page = (props) => <SliceZone {...props} resolver={resolver} /> | |
| export const getStaticProps = useGetStaticProps({ | |
| client: Client(), | |
| uid: ({ params }) => params.uid | |
| }) | |
| export const getStaticPaths = useGetStaticPaths({ | |
| client: Client(), | |
| type: 'page', | |
| fallback: process.env.NODE_ENV === 'development', | |
| formatPath: ({ uid }) => ({ params: { uid }}) | |
| }) | |
| export default Page |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // pages/_app.js | |
| import React from 'react' | |
| import NextApp from 'next/app' | |
| import { ThemeProvider, BaseStyles } from 'theme-ui' | |
| export default class App extends NextApp { | |
| render() { | |
| const { Component, pageProps } = this.props | |
| return ( | |
| <ThemeProvider theme={theme}> | |
| <BaseStyles> | |
| <Component {...pageProps} /> | |
| </BaseStyles> | |
| </ThemeProvider> | |
| ) | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // pages/_document.js | |
| import Document, { Html, Head, Main, NextScript } from 'next/document' | |
| import { InitializeColorMode } from 'theme-ui' | |
| import { createResolver } from 'next-slicezone/resolver' | |
| export default class extends Document { | |
| static async getInitialProps(ctx) { | |
| const initialProps = await Document.getInitialProps(ctx) | |
| await createResolver() | |
| return { ...initialProps } | |
| } | |
| render() { | |
| return ( | |
| <Html> | |
| <Head /> | |
| <body> | |
| <InitializeColorMode /> | |
| <Main /> | |
| <NextScript /> | |
| </body> | |
| </Html> | |
| ) | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const withTM = require('next-transpile-modules')(['next-slicezone', 'essential-slices']); | |
| module.exports = withTM(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** Example file */ | |
| import Prismic from 'prismic-javascript' | |
| import Link from 'next/link' | |
| import smConfig from './sm.json' | |
| export const apiEndpoint = smConfig.apiEndpoint | |
| // -- Access Token if the repository is not public | |
| // Generate a token in your dashboard and configure it here if your repository is private | |
| export const accessToken = '' | |
| // -- Link resolution rules | |
| // Manages the url links to internal Prismic documents | |
| export const linkResolver = (doc) => { | |
| if (doc.type === 'post') { | |
| return `/blog/${doc.uid}` | |
| } | |
| return '/' | |
| } | |
| // Additional helper function for Next/Link components | |
| export const hrefResolver = (doc) => { | |
| if (doc.type === 'post') { | |
| return '/blog/[uid]' | |
| } | |
| return '/' | |
| } | |
| export const customLink = (type, element, content, children, index) => ( | |
| <Link | |
| key={index} | |
| href={hrefResolver(element.data)} | |
| as={linkResolver(element.data)} | |
| > | |
| <a>{content}</a> | |
| </Link> | |
| ) | |
| export const routes = [{ | |
| type: 'page', | |
| path: '/:uid' | |
| }] | |
| export const Client = (req = null, options = {}) => ( | |
| Prismic.client(apiEndpoint, Object.assign({ routes: Router.routes }, options)) | |
| ) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react' | |
| export default ({ i }) => { | |
| return () => i ? <div /> : <p>Your SliceZone is loading... You might need to reload this page.</p> | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment