prismicio-community / nextjs-starter-prismic-blog Goto Github PK
View Code? Open in Web Editor NEWBlog project with Next.js & Prismic
Home Page: https://nextjs-starter-prismic-blog.vercel.app
License: Apache License 2.0
Blog project with Next.js & Prismic
Home Page: https://nextjs-starter-prismic-blog.vercel.app
License: Apache License 2.0
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`}
After deploying this app with vercel, global styles are not applied.
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.
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.
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.
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;
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.
Would be really nice to see the new features like getStaticProps, getStaticPaths and getServerSideProps implemented in this example.
As of right now, going through the steps with this sample project doesn't properly set up Prismic Previews.
What needs to be done:
prismicio/next
package to 0.1.0
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.
I am not sure what the following line does?
if (!req && frontClient) return frontClient;
As frontClient is never assigned, am I missing something?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.