🐤Next.js 에서 라우팅 하기

import Link from 'next/link';

const App = () => {
  return (
    <div>
      <h2>Link to 'tomato' Page</h2>
      <Link href="/tomato">
        <a>Move to '/tomato'</a>
      </Link>
    </div>
  );
};

export default App;

import Link from 'next/link';

const tomato = () => {
  return (
    <div>
      <h2>Link to 'Main' Page</h2>
      <Link href="/">
        <a>Move to '/'</a>
      </Link>
    </div>
  );
};

export default tomato;

import Link from 'next/link';

const App = () => {
  return (
    <div>
      <h2>Link to 'tomato' Page</h2>
      <a href="/tomato">
        <p>Move to '/tomato'</p>
      </a>
    </div>
  );
};

import Link from 'next/link';

const App = () => {
  return (
    <div>
      <h2>Link to 'potato' Page</h2>
      <Link href="/tomato">
        <Child/>
      </Link>
    </div>
  );
};

const Child = () => {
  return <p>Move to '/tomato'</p>;
};

export default App;

<Link href="/tomato">
  <a><Child/></a>
</Link>

[name].jsx

// [name].jsx

import Link from 'next/link';

const name = () => {
  return (
    <div>
      <h2>Hello!!</h2>
      <Link href="/">Move to '/'</Link>
    </div>
  );
};

export default name;

// pages/index.jsx

import Link from 'next/link';

const App = () => {
  return (
    <div>
      <h2>Link to 'potato' Page</h2>
      <Link href="/vegetable/potato">
        <a>Move to '/vegetable/potato'</a>
      </Link>
    </div>
  );
};

export default App;

// [name].jsx
import Link from 'next/link';
import { useRouter } from 'next/router';

const name = () => {
  const router = useRouter();
  console.log(router);
  return (
    <div>
      <h2>Hello!!</h2>
      <Link href="/">Move to '/'</Link>
    </div>
  );
};

export default name;

{pathname: "/vegetable/[name]", route: "/vegetable/[name]",
query: {…}, asPath: "/vegetable/potato", components: {…}, …}
asPath: "/vegetable/potato"
back: ƒ ()
basePath: ""
beforePopState: ƒ ()
components: {/: {…}, /_app: {…}, /vegetable/[name]: {…}}
defaultLocale: undefined
events: {on: ƒ, off: ƒ, emit: ƒ}
isFallback: false
isLocaleDomain: false
isPreview: false
isReady: true
locale: undefined
locales: undefined
pathname: "/vegetable/[name]"
prefetch: ƒ ()
push: ƒ ()
query: {name: "potato"}
reload: ƒ ()
replace: ƒ ()
route: "/vegetable/[name]"
__proto__: Object

// index.jsx

import { useState } from 'react';
import { useRouter } from 'next/router';

const App = () => {
  const [name, setName] = useState('');
  const router = useRouter();
  return (
    <div>
      <button type="button" onClick={() => router.push('/tomato')}>
        tomato로 가기
      </button>
      <p>이름</p>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        style={{ marginRight: '12px' }}
      />
      <button type="button" onClick={() => router.push(`/vegetable/${name}`)}>
        {name}으로 가기
      </button>
    </div>
  );
};

export default App;

// pages/vegetable/[name].jsx

import Link from 'next/link';
import { useRouter } from 'next/router';

const name = () => {
  const { query } = useRouter();
  console.log(query);
  return (
    <div>
      <h2>Hello!! {query.name}</h2>
      <Link href="/">Move to '/'</Link>
    </div>
  );
};

export default name;