Not to able to get `props` in react js – next js app

Asked By: Anonymous

I’m working on Server Side Rendering react app with React Js and Next Js as my framework, and I’m trying to fetch initial props with getServerSideProps method by referring to the document (next js doc for getServerSideProps) too.

But I’m always getting empty props object as {} on every request. For now, I’m just trying to pass a dummy text in props.

How can I get my props on the initial load?

Please refer my code below

import React from "react";
import { Provider } from "react-redux";
import ConfigureStore from "../Store";

const Home = props => {
  const store = ConfigureStore();
  console.log("props", props);
  return (
    <Provider store={store}>
      <div>My content</div>
    </Provider>
  );
};

// This gets called on every request
export async function getServerSideProps() {
  const data = "Hello World";
  return { props: data };
}

export default Home;

Solution

Answered By: Anonymous

import React from "react";
import { Provider } from "react-redux";
import ConfigureStore from "../Store";

const Home =({ data }) => {
  console.log("data", data);
  return (
      <div>My content</div>
  );
};

// This gets called on every request
export async function getServerSideProps() {
  const data = "Hello World";
  return { props: {data :"Hello World"} };
}

export default Home;