Next.js로 해봐!두 페이지 편집 & 페이지 이동
14679 단어 next.js
페이지 편집을 시도해 보세요!
그럼 페이지를 실제로 편집해 보세요!페이지의 index를 이동합니다.js를 열어 주세요.
나는 내용이 이렇다고 생각한다.
index.js
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.js</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h2>Documentation →</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h2>Learn →</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/canary/examples"
className={styles.card}
>
<h2>Examples →</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h2>Deploy →</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
}
index.켰어요?그럼의 장소.써보세요!
<main className={styles.main}>
<h1 className={styles.title}>
ようこそ <a href="https://nextjs.org">Next.js!</a>
</h1>
</main>
다음 그림과 같습니다.되다이미지
완전히 바뀌었나요?
페이지 마이그레이션
페이지 마이그레이션을 계속합니다.React.js와 달리, Next.js는 페이지 디렉터리의 파일에서 루트를 만듭니다.그러니까 페이지/index.js는localhost:3000이 됩니다.
실제로 해 보세요.
pages/posts/first-post.이 페이지에서 만들어 보겠습니다.여기서 import에서next/link를 사용합니다.
import Link from 'next/link'
<h1 className={styles.title}>
ページ遷移!
<Link href="/posts/first-post">
<a>this page!</a>
</Link>
</h1>
import Link from 'next/link'
export default function FirstPost() {
return (
<>
<h1>First Post</h1>
<h2>
<Link href="/">
<a>Back to home</a>
</Link>
</h2>
</>
)
}
this page!클릭하면 URL이 변경됩니다.
Reference
이 문제에 관하여(Next.js로 해봐!두 페이지 편집 & 페이지 이동), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kubota20/items/67c102b422097851ef0e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)