CODEWITHSUNDEEP
javascriptreactjsnext.js
Akshay
Akshay

Reputation: 391

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

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;

Upvotes: 3

Views: 2829

Answers (2)

Hasan Sefa Ozalp
Hasan Sefa Ozalp

Reputation: 7204

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.

Upvotes: 2

Rebai Ahmed
Rebai Ahmed

Reputation: 1600

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;

Upvotes: 0

Related Questions