Reputation: 2573
Below is the code located at "Pages/home.js". // localhost:3000/home
import axios from 'axios';
import Section1 from '../components/home-sections/section-1';
const Homepage = ({ show }) => {
const Html = JSON.parse(show.response.DesktopHTML);
const renderSection = () => {
return Html.map((itemData,index)=>{
return(<div key={index}>{itemData.DisplayName}</div>)
})
}
return(
<div>
{ renderSection()}
<Section1 />
</div>
)
}
export const getServerSideProps = async ({ query }) => {
try {
const response = await axios.get(
`https://api.example.com/getHomeSection?title=Section 1`
);
return {
props: {
show: response.data,
},
};
} catch (error) {
return {
props: {
error: error.error,
},
};
}
};
export default Homepage;
Now same code I added into section-1.js and this file is located to "components/home-sections/section-1.js
"
Now getServerSideProps
is working fine in home.js, but in section-1.js it is not working.
Error: TypeError: show is undefined in section-1.js
Upvotes: 40
Views: 79116
Reputation: 12519
getServerSideProps
can only be exported from Page components. It will not be run on components imported into a page.
However, you could export a function from the component that returns the props, and call that function from the page's getServerSideProps
function.
Create a getServerSideProps
function on the component.
// @components/MyComponent.tsx
import { GetServerSidePropsContext } from 'next';
function MyComponent(props: IMyComponentProps) {
return (<div>MyComponent</div>;)
}
MyComponent.getServerSideProps = async (context: GetServerSidePropsContext): Promise<{ props: IMyComponentProps }> => {
return { props: { ... } };
}
export default MyComponent;
In your page's getServerSideProps
function, call the component's getServerSideProps
function and merge the props from the component with the props from the page.
// mypage.tsx
import MyComponent from '@components/MyComponent';
const Page: NextPageWithLayout = (props: IIndexPageProps) => {
return <MyComponent />;
}
export async function getServerSideProps(context: GetServerSidePropsContext): Promise<{ props: IIndexPageProps }> {
let componentServerSideProps = await MyComponent.getServerSideProps(context);
let otherServerSideProps = { props: { ... } };
return {
props: {
...componentServerSideProps.props,
...otherServerSideProps.props
}
};
}
Upvotes: 16
Reputation: 524
You gotta use generateStaticParams() from Next.js v13. Here's the reference: https://nextjs.org/docs/app/api-reference/functions/generate-static-params
Upvotes: 1
Reputation: 548
Using the latest Next.js version (13)
Data fetching is now done in a different way.
Reference: Data Fetching. See also, Migrating From Pages to App
Upvotes: 4
Reputation: 99
getServerSideProps won't work in components it needs to be implemented on a page only and if you are using the next.js-13 app directory, it won't work there as well, you need to use the pages directory
in the app directory, you just need to write use client
in the first line for client components and leave it empty for server components
Upvotes: 5
Reputation: 2858
You cannot use getServerSideProps
in non-page components. You can either pass the prop from Home
to HomeSection
or create a context so the value can be available globally from the component tree
getServerSideProps can only be exported from a page. You can’t export it from non-page files.
https://nextjs.org/docs/basic-features/data-fetching#only-allowed-in-a-page-2
Upvotes: 71