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

user_6364122 0
Viewed 2145

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;
next.js reactjs javascript
2 Answers

The problem with getServerSideProps is that it can only be exported from a page. You can’t export it from non-page files. Same goes with getStaticProps.

So you can not use it in partial components.

Which means you can only use it directly on files in /page directory.

user_101794450 
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;
user_53306550
Related