Back

Absolute imports and module aliases Next 13

tsconfig.json or jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./src/app",
    "paths": {
      "@/components/*": ["components/*"],
      "@/styles/*": ["styles/*"]
    }
  }
}

Example

import Link from 'next/link'
import Layout from '@/components/Layout'

export const metadata = {
  title: 'Home',
  description: 'A description',
  keywords: 'keywords',
}

export default function HomePage() {
  return (
    <Layout>
      <h1>Home</h1>
      <Link href="/about">About</Link>
    </Layout>
  )
}
import Link from 'next/link'
import styles from '@/styles/footer.module.css'

const Footer = () => {
  return (
    <footer className={styles.footer}>
      <p>Copyright &copy; Matthew Shirtliffe {new Date().getFullYear()}</p>
      <p>
        <Link href="/about">About</Link>
      </p>
    </footer>
  )
}

export default Footer