Next.js App Router Example

Sure, here is a simple example of a Next.js 13 app using the router in TypeScript. This example doesn't cover all the features of Next.js or its router, but it should give you a good starting point.

First, you need to install Next.js, React, and React-DOM:

bashCopy code
npx create-next-app@latest --use-npm --ts

Then, you can create a simple page that uses the router. In Next.js, pages are automatically routed based on their file name in the pages directory. Here's an example of a page that uses the router to navigate to another page:

tsxCopy code
// pages/index.tsx
import { useRouter } from 'next/router'
import { FC } from 'react'

const HomePage: FC = () => {
  const router = useRouter()

  const handleClick = () => {
    router.push('/about')
  }

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={handleClick}>Go to About Page</button>
    </div>
  )
}

export default HomePage

And here's the about page:

tsxCopy code
// pages/about.tsx
import { FC } from 'react'

const AboutPage: FC = () => (
  <div>
    <h1>About Page</h1>
  </div>
)

export default AboutPage

In this example, clicking the button on the home page will navigate to the about page.

Please note that this is a very basic example and doesn't cover many of the features of Next.js or its router. For more information, you can check the official Next.js documentation.

Also, the code snippets provided above are based on the official Next.js repository on GitHub. You can find more examples and information in the official repository.