Updated getInitialProps to getServerSideProps

components/Footer.js

@@ -23,7 +23,7 @@ const Footer = () => (
  >
  <img
  className="footer-logo"
- src="/public/images/logo-prismic.svg"
+ src="/images/logo-prismic.svg"
  alt="Gray Prismic logo"
  />
  </a>

package.json

@@ -8,11 +8,11 @@
  "email": "[email protected]"
  },
  "dependencies": {
- "next": "^9.1.4",
- "prismic-javascript": "^2.1.3",
- "prismic-reactjs": "^1.1.2",
- "react": "^16.12.0",
- "react-dom": "^16.12.0"
+ "next": "^9.3.1",
+ "prismic-javascript": "^2.7.0",
+ "prismic-reactjs": "^1.3.0",
+ "react": "^16.13.1",
+ "react-dom": "^16.13.1"
  },
  "devDependencies": {
  "now": "^16.6.2"

pages/_error.js

@@ -33,9 +33,9 @@ const Error = ({ statusCode }) => {
  );
 };
 
-Error.getInitialProps = ({ res, err }) => {
+export async function getServerSideProps({ res, err }) {
  const statusCode = res ? res.statusCode : err ? err.statusCode : null;
- return { statusCode };
-};
+ return { props: { statusCode } };
+}
 
 export default Error;

pages/blog/[uid].js

@@ -45,18 +45,17 @@ const Post = ({ post }) => {
 /**
  * Query the post document from Prismic when the page is loaded
  */
-Post.getInitialProps = async function({ req, query }) {
+export async function getServerSideProps(context) {
  try {
- const { uid } = query;
- const document = await Client(req).getByUID("post", uid);
-
+ const { uid } = context.params;
+ const document = await Client(context.req).getByUID("post", uid);
  return {
- post: document
+ props: { post: document || null }
  };
  } catch (error) {
  console.error(error);
  return error;
  }
-};
+}
 
 export default Post;

pages/index.js

@@ -35,25 +35,25 @@ const Home = ({ doc, posts }) => {
 /**
  * Query the homepage document and blog posts from Prismic when the page is loaded
  */
-Home.getInitialProps = async function({ req }) {
- try {
+export async function getServerSideProps(context) {
+ // try {
  // Retrieve the homepage document
- const doc = await Client(req).getSingle("blog_home");
+ const doc = await Client(context.req).getSingle("blog_home");
 
  // Retrieve the blog posts organized in descending chronological order
- const posts = await Client(req).query(
+ const posts = await Client(context.req).query(
  Prismic.Predicates.at("document.type", "post"),
  { orderings: "[my.post.date desc]" }
  );
 
+ // will be passed to the page component as props
  return {
- doc,
- posts: posts ? posts.results : []
+ props: { doc, posts: posts ? posts.results : [] }
  };
- } catch (error) {
- console.error(error);
- return error;
- }
-};
+ // } catch (error) {
+ //  console.error(error);
+ //  return error;
+ // }
+}
 
 export default Home;

prismic-configuration.js

@@ -1,7 +1,7 @@
 // -- Prismic API endpoint
 // Determines which repository to query and fetch data from
 // Configure your site's access point here
-export const apiEndpoint = 'https://your-repo-name.cdn.prismic.io/api/v2'
+export const apiEndpoint = 'https://nextjs-example-blog.cdn.prismic.io/api/v2'
 
 // -- Access Token if the repository is not public
 // Generate a token in your dashboard and configure it here if your repository is private