Question

我将元件定义为如下文所示,但是在我的剪辑中,它没有显示“当地:3000/#home”。我的所有jsx文档都有“用户”的标记,c 它有组合式一壳,可上载到Github页,因此我可以使用服务器部件。我不知道这是否与它有关。

这里是我的布局。

"use client"

import  ./globals.css 
import { Exo_2, Bruno_Ace } from  next/font/google 
import Navbar from  @/components/Navbar 
import { AnimatePresence } from  framer-motion ;


 const exo_2 = Exo_2({
  subsets: [ latin ],
  variable:  --font-body ,
  display:  swap 
 })

 const bruno_ace = Bruno_Ace({
  subsets: [ latin ],
  variable:  --font-nav ,
  weight:  400 ,
  display:  swap 
 })

export const metadata = {
  title:  Inti Silva ,
  description:  Portfolio Front-end Inti Tomas Silva ,
}

export default function RootLayout({children}) {

  return (

    <html lang="en" className={`${exo_2.variable} ${bruno_ace.variable}`}>
      <body>
        <Navbar />
        <AnimatePresence>
        {children}
        </AnimatePresence>
      </body>
    </html>
  )
}

我试图将元件放在我的网页上。 jsx, 但它没有显示。我使用新目录,称该目录本应在这一版本中保持稳定。

My root page..jsx:

"use client"

import About from  ../components/About ;
import Contact from  ../components/Contact ;
import Main from  ../components/Main ;
import Projects from  ../components/Projects ;
import Skills from  ../components/Skills ;
import Transitions from  @/components/Transitions ;



export default function Home() {
  return (
        <>
        <Transitions/>
        <Main />
        <About />
        <Skills />
        <Projects />
        <Contact />
        </>
  );
};

Answer 1

Meta Tags in nextjs

然而,在你的法典中,我没有看到任何标题和说明。您可以自行制作,并通过这些标题和说明。

这方面的一个例子是meta tags 。

import Head from  next/head ;
interface IProps{
  title?: string;
  description?: string;
  image?: string
}
export const MetaTags = ({title, description, image}: IProps) => {
  return(
      <Head>
      {title && (
        <>
          <title>{title}</title>
          <meta property="og:title" content={title} />
          <meta name="twitter:title" content={title} />
        </>
      )}
      {description && (
        <>
          <meta name="description" content={description} />
          <meta property="og:description" content={description} />
          <meta name="twitter:description" content={description} />
        </>
      )}
    </Head>
  )
}

并称这一构成部分构成你的网页组成部分,并附上与你的网页有关的标题和说明。

import React from "react";
import Link from "next/link";
import { MetaTags } from "../Components/MetaTags";
export default () => (
  <div>
    <MetaTags
      title="Home Page"
      description="home page description"
      image="image_url"
    />
    <Link href="/about">
      <a>About</a>
    </Link>
  </div>
);

Meta Tags in nextjs

友情链接