With Next.js 10 out, one of the biggest change is the introduction of Next/Image which does really cool things like auto serving images as webp and auto lazy loading images.

Since I started my blog I upgraded to Next.js 10 and adding was fairly simple and since mine was based off this project I'd be up for adding Next/Image to this project as well.

As of right now, going through the steps with this sample project doesn't properly set up Prismic Previews.

What needs to be done:

1. Update prismicio/next package to 0.1.0
2. Update the getStaticProps function on the main home page to this:

export async function getStaticProps({ previewData }) {
  const client = createClient({ previewData });

  let blogHome = null;
  try {
    blogHome = await client.getSingle('blog-home');
  } catch {
    // If we reach this line, it means a Blog Home document was not created
    // yet. We don't need to do anything here. We will render a component on
    // the page with a helpful setup message.
  }

  const posts = await client.getAllByType('post', {
    orderings: [{ field: 'my.post.date', direction: 'desc' }],
  });

  return {
    props: {
      blogHome,
      posts,
    },
  };
}

Everything should be fine from there.

I can take care of this after Wednesday if no one else can get to it before me.

Tried with Node v8 and v10

With node-dev:

❯ npm run node-dev

> [email protected] node-dev /Users/emirotin/work/nextjs-blog
> nodemon server.js

[nodemon] 1.19.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node server.js`
/Users/emirotin/work/nextjs-blog/prismic-configuration.js:1
import Prismic from 'prismic-javascript'
       ^^^^^^^

SyntaxError: Unexpected identifier
    at Module._compile (internal/modules/cjs/loader.js:721:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Users/emirotin/work/nextjs-blog/server.js:8:39)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
[nodemon] app crashed - waiting for file changes before starting...

with dev:

❯ npm run dev

> [email protected] dev /Users/emirotin/work/nextjs-blog
> now dev

> UPDATE AVAILABLE The latest version of Now CLI is 15.8.7
> Run the `now update` command to update to the latest version
> Changelog: https://github.com/zeit/now-cli/releases/tag/15.8.7
> Now CLI 15.5.0 dev (beta) — https://zeit.co/feedback/dev
> Setting up 1 Builder
[@now/next] Downloading user files...

> Error! build_utils_1.getNodeVersion is not a function
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `now dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

previewData is not returned by getStaticProps context in pages/index.tsx

export async function getStaticProps(context) {
  console.log(context);
  const client = createClient({ context });

  let blogHome = null;
  try {
    blogHome = await client.getSingle("blog-home");
  } catch {
    // If we reach this line, it means a Blog Home document was not created
    // yet. We don't need to do anything here. We will render a component on
    // the page with a helpful setup message.
  }

  const posts = await client.getAllByType("post", {
    orderings: [{ field: "my.post.date", direction: "desc" }],
  });

  return {
    props: {
      blogHome,
      posts,
    },
  };
}

export default Home;

After following the Prismic + Next.js tutorial here, I found that when I opened the console there was a couple of error messages shown here:

There doesn't seem to be anything particularly wrong with the actual page, it just seems like something added quotes to the ends of the src for prismic.js. I was wondering if this is an issue on my end or if this was intentional from this template.

Tested in both Chrome and Edge on Windows.

Encountered an issue where the address for the prismic.min.js file was generating a 404 locally and upon deployment. This results in styles not loading for index and blog single pages.

localhost/:11 GET http://localhost:3000/%22https://static.cdn.prismic.io/prismic.min.js?repo=project&new=true%22 404 (Not Found)

This is resolved by changing PrismicScript.js to remove the double quote characters from the src attribute:

src={`https://static.cdn.prismic.io/prismic.min.js?repo=${repoName}&new=true`}

Hi.

When I run "npm run dev" everything looks good.

But when I deploy to Vercel. Some of the CSS does not load. Specifically:

If I run the commands locally:
npm run build
npm start
I am also missing the css from reset and globals.

Any idea how to solve this?
Also when I make a new post in Prismic. I don't see the change until I make a new deploy.

Thanks in advance.

I am not sure what the following line does?

if (!req && frontClient) return frontClient;

As frontClient is never assigned, am I missing something?

Would be really nice to see the new features like getStaticProps, getStaticPaths and getServerSideProps implemented in this example.

After deploying this app with vercel, global styles are not applied.

In my local

In vercel

Here's the vercel app URL: https://mochetts-prismic-blog.vercel.app/

What I found so far is that the global and reset styles are not added to the header when running the next build command.

I don't know why but anything I try on index.js (everything there regarding the client) breaks, await client.. does not work at all. I tried calling to the API myself and it worked fine, it only breaks in code. I didn't change anything from when I installed it.