Nextjs | TypeScript getInitialProps undefined when pass to layout component

Question

hi i am newbie to nextjs

i want to pass dynamic properties to the header, for this i am using getInitialProps in nextjs. getInitialProps working okay, but when i pass to layout component its showing UNDEFINED. Below i have shared my all necessary code snippet. please help me what should in need to do for solve this problem

_app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import Layout from '../components/Layout'
import 'flowbite'
import { categoryProps } from '../interfaces'


const  MyApp = ({ Component, pageProps }: AppProps, {categories}: categoryProps) => {
  return (
    <Layout categories={categories}> 
    <Component {...pageProps} />
    </Layout>
  )
}

MyApp.getInitialProps = async () => {
  const res = await fetch(process.env.API_URL+'/categories');
  const categories = await res.json();
  return {categories}
}
export default MyApp

layout.tsx

import React from 'react'
import Footer from './Footer'
import Header from './Header'
import HeaderSearch from './HeaderSearch'
import Nav from './Nav'
import { categoryProps } from '../interfaces'

function Layout({children}:any,{categories}:categoryProps) {
  console.log(categories);  //output undefined
  return (
    <>
        <Header/>
        <HeaderSearch categories={categories} />
        <Nav/>
        {children}
        <Footer/>
    </>

  )
}

export default Layout

interfaces.ts

export interface Category {
    name:string,
    image:string,
    slug:string
}

export interface categoryProps {
    categories:Category[]
  }

components chrome extension output screenshots MyApp components showing categories array list.

components chrome extension output screenshots Layout components showing categories undefined

score 0 · Answer 1 · answered Mar 07 '23 at 11:18

0

I guess that the only issue is that you are trying to read categories from the second parameter passed to MyApp component, which never got passed in reality.

Just try something like this:

const  MyApp = ({ Component, pageProps: {categories, ...restPageProps}} : AppProps) => {

  return (
    <Layout categories={categories}> 
    <Component {...restPageProps} />
    </Layout>
  )
}

A similar fix should help in a Layout as well.

answered Mar 07 '23 at 11:18

Eugene Tusmenko

836
4
11

categories having separate type props – shazim ali Mar 09 '23 at 16:46
Have you tried my example? – Eugene Tusmenko Mar 09 '23 at 17:30
YES I tried, TypeError: Cannot read properties of undefined (reading 'categories') – shazim ali Mar 09 '23 at 18:35
I tried once more on my side, works as expected: interface CommonAppProps { categories: string; } function MyApp({ Component, pageProps }: AppProps) { console.log("Categories from MyApp", pageProps.categories); //WORKS ..... } – Eugene Tusmenko Mar 09 '23 at 21:04
And test component with getInitialProps: import { NextPage } from "next"; interface TestProps { categories: string; } const TestComponent: NextPage = (props) => ( <> {props.categories}> // WORKING ); TestComponent.getInitialProps = () => { return { categories: "test-some-categories", }; }; export default TestComponent; – Eugene Tusmenko Mar 09 '23 at 21:05

Nextjs | TypeScript getInitialProps undefined when pass to layout component

1 Answers1