0

I am new in Next Js. Whenever I click on the link it updates the URL but the page is not showing any data. But in Elements data is present.

here is the code of nav file:

<li className="nav-item active">
                  <Link href="/">
                    <a className="nav-link">
                      Home <span className="sr-only">(current)</span>
                    </a>
                  </Link>
                </li>

                <li className="nav-item">
                  <Link href="/about">
                    <a className="nav-link">About</a>
                  </Link>
                </li>

                <li className="nav-item">
                  <Link href="/blog">
                    <a className="nav-link">Blog</a>
                  </Link>
                </li>
                <li className="nav-item">
                  <Link href="/services">
                    <a className="nav-link">Services</a>
                  </Link>
                </li>

Blog.js file:

import React from "react";

const Blog = () => {
  return <h1>Blog</h1>;
};

export default Blog;

Here is my folder structure:

enter image description here

ammar
  • 23
  • 7
  • I update the question. Data is present in "Elements" chrome dev tools but not showing on page – ammar Apr 17 '21 at 11:56
  • To clarify, when you click on the "Blog" link in your nav the browser navigates to the `/blog` page but you can't see the `Blog` heading? Can you share you `pages` folder structure? – juliomalves Apr 17 '21 at 12:01
  • Yes, exactly. how can I share a pic here? And one thing more HomePage is working fine only other pages like blog, services, etc nothing showing. – ammar Apr 17 '21 at 12:04
  • I update the question again. – ammar Apr 17 '21 at 12:14
  • Do you maybe have some CSS applied that could be hiding some elements? I can't see anything wrong in terms of Next.js setup. – juliomalves Apr 17 '21 at 12:24
  • Thank you for your help. Yes, CSS causing the problem. – ammar Apr 17 '21 at 12:30

0 Answers0