I’m learning nextjs using book "Building React Apps using server-side rendering"
In this I’m building basic react app with index page link to about page.
The project package.json –
{
"name": "my-next-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "next",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"next": "^13.4.19",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
pages/index.js is –
import React from "react";
import Link from "next/link";
function MyComponent() {
return (
<div>
<p>Hello from Next.js</p>
<Link herf="/About"> <a> About</a> </Link>
</div>
);
};
export default MyComponent;
pages/about.js is –
import React from "react";
function About() {
return (
<div>
This is an application built using next.js to demonstrate the effectiveness of server side rendering.
</div>
);
}
export default About;
When I run npm start I get below error –
Server Error
Error: Failed prop type: The prop `href` expects a `string` or `object` in `<Link>`, but got `undefined` instead.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
createPropError
node_modules/next/dist/client/link.js (128:19)
createPropError
node_modules/next/dist/client/link.js (138:26)
Array.forEach
<anonymous>
forEach
node_modules/next/dist/client/link.js (135:22)
renderWithHooks
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5658:16)
renderForwardRef
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5842:18)
renderElement
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6005:11)
renderNodeDestructiveImpl
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderChildrenArray
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)
renderNodeDestructiveImpl
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7)
renderNodeDestructive
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderHostElement
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5642:3)
renderElement
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5952:5)
renderNodeDestructiveImpl
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderIndeterminateComponent
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5785:7)
renderElement
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
finishClassComponent
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5688:3)
renderClassComponent
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5696:3)
renderElement
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5943:7)
renderNodeDestructiveImpl
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderIndeterminateComponent
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5785:7)
renderElement
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderChildrenArray
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)
renderNodeDestructiveImpl
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7)
renderNodeDestructive
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderElement
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5971:9)
renderNodeDestructiveImpl
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderChildrenArray
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)
renderNodeDestructiveImpl
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7)
renderNodeDestructive
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderElement
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5971:9)
renderNodeDestructiveImpl
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderContextProvider
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5920:3)
renderElement
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6017:11)
renderNodeDestructiveImpl
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderContextProvider
file:///Users/rnatarajan/Documents/Coding/others/react-ssr/c3/my-next-app/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5920:3)
I checked other stackoverflow questions but I couldn’t find fix for this problem.
Any idea how to fix this?
>Solution :
You have a typo in your pages/index.js. It’s href and not herf.
Here is the fixed component:
import React from "react";
import Link from "next/link";
function MyComponent() {
return (
<div>
<p>Hello from Next.js</p>
<Link href="/About"> <a> About</a> </Link>
</div>
);
};
export default MyComponent;