next.js 如何在下一个js中创建导航栏[关闭]

hfyxw5xn  于 2023-05-28  发布在  其他
关注(0)|答案(1)|浏览(237)

已关闭,此问题需要更focused。目前不接受答复。
**想改善这个问题吗?**更新问题,使其仅通过editing this post关注一个问题。

6天前关闭
Improve this question
我想不出如何在Next.Js中制作导航栏有人能帮助我吗
我尝试了UI,但不知道如何删除文本装饰。我也不知道如何在下一个js中获得背景图像。如果有人能帮上忙,我将不胜感激

pkln4tw6

pkln4tw61#

如果没有额外的上下文和代码片段,就很难确定您要做什么。然而,这里有一些常见的方法可以给予你了解如何在Next.js中制作导航栏和显示bg图像:
对于Navabar:
在Next.js项目的components目录中创建一个Navbar组件,并定义navbar组件。
例如代码:

import React from 'react';
import Link from 'next/link';

const Navbar = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">Home</Link>
        </li>
        <li>
          <Link href="/about">About</Link>
        </li>
        <li>
          <Link href="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navbar;

现在将此Navbar组件导入index.js文件,如下所示:

import Navbar from '../components/Navbar';

const HomePage = () => {
  return (
    <div>
      <Navbar />
      {/* Rest of your page content */}
      <h1>Welcome to the Homepage</h1>
    </div>
  );
};

或者你可以简单地使用一些前端工具包,比如bootstrap
现在,对于背景图像:
把你的bg图像放在/public目录下,你可以在你的组件中使用内联css,如下所示:

const MyComponent = () => {
  return (
    <div
      style={{
        backgroundImage: 'url("/background.jpg")',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat',
        width: '100%',
        height: '100vh',
      }}
    >
      {/* Content of your component */}
    </div>
  );
};

相关问题