I`m currently learning Next.js and stumbled upon a problem. When I have this folder configuration https://i.stack.imgur.com/lSedV.png and code below everything works, but making folders look like this https://i.stack.imgur.com/WfLvm.png and clicking link gives me 404 page. Is there any way to make code work with the second variant?
function Event({ id, title, image, category }) {
return (
<>
<div>{title}</div>
<Link href={`/${category}/${id}`}>
<Image src={image} width={800} height={800} />
</Link>
</>
);
}
export default Event;
Related
I was trying to migrate my nextjs application to app directory, but I found a weird behaviour.
When I have a route in the pages folder like this:
// `pages/test/[slug]/index.tsx`
export default function Page() {
useEffect(() => {
console.log('mount')
return () => {
console.log('unmount')
}
}, [])
return <>
<Link href="/test/1">1</Link>
<Link href="/test/2">2</Link>
</>
}
if I change the page by clicking one of the links, the slug changes, but component doesn't remount. However, when I move this file to app/test/[slug]/page.tsx and mark the file with 'use client';, clicking the link unmounts page component and then mounts it again.
Is this expected behaviour? If so how can I achieve behaviour from pages directory in app?
I am having an issue with the Next/Link component. My issue occurs when the user has reached the product details page. In the home page I have 3 link components that takes the user to either domain.com/headphones || domain.com/earphones || domain.com/speakers. Now in these pages the user can view a desired product which leads them to a dynamic product details page. In the product details page, I have the exact 3 link components from the home page that initially takes the user to either /headphones || /earphones || /speakers. This is where the error comes to play. The url concatenates and leads me to a 404 page.
If the user is in domain.com/speakers/productId and clicks on for example the headphones link component, the url now becomes domain.com/speakers/headphones.. when it should really just take the user back to domain.com/headphones..
Ive tried to use the replace prop in the link component as well as router.push
Any tips are greatly appreciated
const LinkCard = (props) => {
return (
<Link href={props.id}>
<li id={props.id} className={styles.linkContainer}>
<Image
src={props.src}
width={200}
height={200}
objectFit="cover"
className={styles.img}
/>
<h2>{props.title}</h2>
<div>
<p>Shop</p>
<ArrowSVG />
</div>
</li>
</Link>
);
};
export default LinkCard;
The problem is that when you redirect to with using headphones, the Next.js just concatenate the links.
Instead of that, you need to pass your target url to href like /headphones. With that way, you can redirect user to domain.com/headphones
I am using Ant Design and Custom Stylesheet. On first load style is broken, but when I visit another page and come back to broken page, now it looks fine. So the problem is only on the first load. It's on the development server, I have been clear all cache. But still the same issue.
Here is the screenshot how it's looking like after first load
Here is the correct style after I come back from another page
Here is the code how I am rendering the components:
<div>
{jwToken || role === "restaurant_owner" ? (
<Layout>
<Index />
</Layout>
) : (
<div>
<Login />
</div>
)}
</div>
I had a simliar issue, the way I fixed it was to add a mounted variable that depended on the condition. So it looks this.
// Not sure how you pass the condition, I'm assuming hooks
const { condition } = someHook()
const [mounted, setMounted] = useState()
useEffect(() => {
setMounted(true)
return () => setMounted(false)
}, [condition]);
return (
<div>
{mounted && condition && <Component/>
</div>
)
As to why this happens, I suspect it has to do with SSR (I found simliar issue on Github but for Material-UI) and my solution forces the condition to be available only during the browser.
I'm making a Gatsby site that displays WordPress page content (Using WP plugins QP Gatsby and WPgraphQL) and I'm able to target most of the data that I need to populate my pages (titles, images etc) but I run into trouble when it comes to page content.
I use dangerouslySetInnerHtml to display the page content and sometimes the Gatsby site renders with the page author and date for the page above the paragraph text. Showing author and date is appropriate for blog posts but it's odd to see "by John Doe, June 2nd 2020" at the top of my About page. Sometimes the page content presents appropriately (without the author and date) and the pattern that I think I've observed is that the author and date appear after editing page content on the WordPress site while gatsby develop is running.
Is there a way to exclude author and date from the page content query?
screenshot of page example
const IndexPage = ({ data }) => (
<Layout>
<article>
{data.wpPage.featuredImage && (
<figure>
<Img
fluid={data.wpPage.featuredImage.node.localFile.childImageSharp.fluid}
alt={data.wpPage.featuredImage.node.altText}
/>
</figure>
)}
<div dangerouslySetInnerHTML={{ __html: data.wpPage.content }} />
</article>
</Layout>
)
export const query = graphql`
query HomePageQuery {
wpPage(uri: {eq: "/"}) {
id
title
content
featuredImage {
node {
localFile {
childImageSharp {
fluid(maxWidth: 1360) {
...GatsbyImageSharpFluid
}
}
}
altText
}
}
}
}
`
This happens when you've updated the database from the WP end with gatsby develop still running.
If you interrupt and restart gatsby develop, the dangerouslySetInnerHTML contents should present correctly.
Following this guide, I created the following file in my project:
/pages/user/[id].js
class Post extends Component {
render() {
return (
<React.Fragment>
<Navbar />
<Content />
<Footer />
</React.Fragment>
);
}
}
export default Post;
But when I go to that URL, I get a 404.
What is the problem?
Assuming you're visiting (for example), http://localhost:3000/user/something (where something is your id), try also visiting http://localhost:3000/user/something/ (note the backslash). This is currently a known issue in Next with dynamic routing.
(This also assumes you don't have pages/user/something.js in your project as dynamic routes take a back seat to explicitly named routes.)