[Next.js] Link, Routes

Next.js - Layout, Template, Page, Route, Link

• Link
  • 기본 형태 <Link href=”…”>button</Link>
    • ex) <Link href=”/” scroll={false} type=”button”>Home</Link>
  • a tag는 자동 생성
• useRouter
  • import { useRouter } from 'next/navigation';
  • const router = useRouter();
• usePathname
  • import { usePathname } from 'next/navigation’;
  • const pathname = usePathname();
• redirect
  • import { redirect } from 'next/navigation’;
  • if (…) redirect('/login');

 

Next.js - Routes

• Dynamic Routes
• Nested Dynamic Routes
  • /shop/[…slug]: /shop/page.tsx
  • /shop/[[…slug]]: /shop/[[…slug]/page.tsx
• @parallel Routes
• Intercepting Routes
  • client router와 server router를 다르게 표현
  • A → B(intercept) → B(refresh)