first commit

test/integration/typescript/components/angle-bracket-type-assertions.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line
+const myVar = <any>'test'
+
+export default myVar

test/integration/typescript/components/generics.ts

@@ -0,0 +1,10 @@
+class MyClass<T> {
+  value: T
+  constructor(value: T) {
+    this.value = value
+  }
+}
+
+const instance = new MyClass<string>('Hello World from Generic')
+
+export default instance.value

test/integration/typescript/components/hello.module.css

@@ -0,0 +1,3 @@
+.hello {
+  content: 'hello';
+}

test/integration/typescript/components/hello.module.sass

@@ -0,0 +1,2 @@
+.hello
+  content: 'hello'

test/integration/typescript/components/hello.module.scss

@@ -0,0 +1,3 @@
+.hello {
+  content: 'hello';
+}

test/integration/typescript/components/hello.ts

@@ -0,0 +1,10 @@
+import helloStyles from './hello.module.css'
+import helloStyles2 from './hello.module.scss'
+import helloStyles3 from './hello.module.sass'
+
+export function hello(): string {
+  console.log(helloStyles.hello)
+  console.log(helloStyles2.hello)
+  console.log(helloStyles3.hello)
+  return 'Hello'
+}

test/integration/typescript/components/image-legacy.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import Image, { ImageProps } from 'next/legacy/image'
+
+export default () => {
+  const props: ImageProps = {
+    alt: 'test-width-height',
+    src: '/noop.jpg',
+    width: 100,
+    height: 100,
+  }
+
+  const filledProps: ImageProps = {
+    alt: 'test-layout-fill',
+    src: '/noop.jpg',
+    layout: 'fill',
+  }
+
+  return (
+    <>
+      <Image {...props} />
+      <Image {...filledProps} />
+    </>
+  )
+}

test/integration/typescript/components/image.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import Image, { ImageProps } from 'next/image'
+
+export default () => {
+  const props: ImageProps = {
+    alt: 'test-width-height',
+    src: '/noop.jpg',
+    width: 100,
+    height: 100,
+  }
+
+  const filledProps: ImageProps = {
+    alt: 'test-fill-true',
+    src: '/noop.jpg',
+    fill: true,
+  }
+
+  return (
+    <>
+      <Image {...props} />
+      <Image {...filledProps} />
+    </>
+  )
+}

test/integration/typescript/components/link.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import Link, { LinkProps } from 'next/link'
+
+export default () => {
+  const props: LinkProps = {
+    href: '/page',
+    as: '/as-page',
+  }
+
+  return <Link {...props}>Test</Link>
+}

test/integration/typescript/components/router.tsx

@@ -0,0 +1,24 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import React from 'react'
+import Router, { withRouter } from 'next/router'
+
+export default withRouter(({ router }) => {
+  React.useEffect(() => {
+    Router.events.on('routeChangeComplete', () => {})
+    //@ts-expect-error
+    Router.events.on('event', () => {})
+    Router.prefetch('/page')
+    Router.push
+    Router.back
+    Router.reload
+
+    router.events.on('routeChangeComplete', () => {})
+    //@ts-expect-error
+    router.events.on('event', () => {})
+    router.prefetch('/page')
+    router.push
+    router.back
+    router.reload
+  })
+  return <>{router.pathname}</>
+})

test/integration/typescript/components/world.tsx

@@ -0,0 +1,5 @@
+import React, { type JSX } from 'react'
+
+export function World(): JSX.Element {
+  return <>World</>
+}

test/integration/typescript/extension-order/js-first.js

@@ -0,0 +1 @@
+export const value = 'OK'

test/integration/typescript/extension-order/js-first.ts

@@ -0,0 +1 @@
+export const value = 'WRONG FILE'

test/integration/typescript/next.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  onDemandEntries: {
+    // Make sure entries are not getting disposed.
+    maxInactiveAge: 1000 * 60 * 60,
+  },
+}

test/integration/typescript/pages/_app.tsx

@@ -0,0 +1,9 @@
+import type { AppType } from 'next/app'
+
+const MyApp: AppType<{ foo: string }> = ({ Component, pageProps }) => {
+  return <Component {...pageProps} />
+}
+
+MyApp.getInitialProps = () => ({ foo: 'bar' })
+
+export default MyApp

test/integration/typescript/pages/_document.tsx

@@ -0,0 +1,11 @@
+import Document, { DocumentContext } from 'next/document'
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const initialProps = await Document.getInitialProps(ctx)
+
+    return initialProps
+  }
+}
+
+export default MyDocument

test/integration/typescript/pages/_error.tsx

@@ -0,0 +1,11 @@
+import { NextPageContext } from 'next'
+import ErrorComponent from 'next/error'
+
+class CustomError extends ErrorComponent {
+  static getInitialProps({ res }: NextPageContext) {
+    const statusCode = 500
+    return { statusCode, title: 'CustomError' }
+  }
+}
+
+export default CustomError

test/integration/typescript/pages/angle-bracket-type-assertions.tsx

@@ -0,0 +1,3 @@
+import value from '../components/angle-bracket-type-assertions'
+
+export default () => <div id="value">{value}</div>

test/integration/typescript/pages/api/async.tsx

@@ -0,0 +1,7 @@
+import { NextApiHandler } from 'next'
+
+const AsyncApiEndpoint: NextApiHandler = async (req, res) => {
+  res.status(200).json({ code: 'ok' })
+}
+
+export default AsyncApiEndpoint

test/integration/typescript/pages/api/sync.tsx

@@ -0,0 +1,7 @@
+import { NextApiHandler } from 'next'
+
+const SyncApiEndpoint: NextApiHandler = (req, res) => {
+  res.status(200).json({ code: 'ok' })
+}
+
+export default SyncApiEndpoint

test/integration/typescript/pages/generics.tsx

@@ -0,0 +1,3 @@
+import value from '../components/generics'
+
+export default () => <div id="value">{value}</div>

test/integration/typescript/pages/hello.tsx

@@ -0,0 +1,49 @@
+import { useRouter } from 'next/router'
+import React, { type JSX } from 'react'
+import { hello } from '../components/hello'
+import Image from '../components/image'
+import Link from '../components/link'
+import Router from '../components/router'
+import { World } from '../components/world'
+import { value as resolveOrderValue } from '../extension-order/js-first'
+
+export enum SearchEntity {
+  SEARCH_ENTITY_NONE = 0,
+  SEARCH_ENTITY_POSITION = 1,
+  SEARCH_ENTITY_USER = 2,
+  SEARCH_ENTITY_QUESTION = 3,
+  SEARCH_ENTITY_TOPIC = 4,
+}
+
+// supports override
+class Test {
+  show() {
+    console.log('show Test')
+  }
+}
+
+class Test2 extends Test {
+  override show() {
+    console.log('overriding show Test')
+  }
+}
+
+new Test2().show()
+
+export default function HelloPage(): JSX.Element {
+  const router = useRouter()
+  console.log(process.browser)
+  console.log(router.pathname)
+  console.log(router.isReady)
+  console.log(router.isPreview)
+  return (
+    <div>
+      <p>One trillion dollars: {1_000_000_000_000}</p>
+      <p id="imported-value">{resolveOrderValue}</p>
+      {hello()} <World />
+      <Router />
+      <Link />
+      <Image />
+    </div>
+  )
+}

test/integration/typescript/pages/ssg/[slug].tsx

@@ -0,0 +1,43 @@
+import { GetStaticPaths, GetStaticProps } from 'next'
+
+type Params = {
+  slug: string
+}
+
+type Props = {
+  data: string
+  title: string
+}
+
+type PreviewData = {
+  title: string
+}
+
+export const getStaticPaths: GetStaticPaths<Params> = async () => {
+  return {
+    paths: [{ params: { slug: 'test' } }],
+    fallback: false,
+  }
+}
+
+export const getStaticProps: GetStaticProps<
+  Props,
+  Params,
+  PreviewData
+> = async ({ params, previewData }) => {
+  return {
+    props: {
+      data: params!.slug,
+      title: previewData?.title || 'default title',
+    },
+    revalidate: false,
+  }
+}
+
+export default function Page({ data, title }: Props) {
+  return (
+    <h1>
+      {data} {title}
+    </h1>
+  )
+}

test/integration/typescript/pages/ssg/blog/[post].tsx

@@ -0,0 +1,46 @@
+import {
+  InferGetStaticPropsType,
+  GetStaticPaths,
+  GetStaticPropsContext,
+} from 'next'
+
+type Post = {
+  author: string
+  content: string
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  return {
+    paths: [{ params: { post: '1' } }],
+    fallback: false,
+  }
+}
+
+export const getStaticProps = async (
+  ctx: GetStaticPropsContext<{ post: string }>
+) => {
+  const posts: Post[] = [
+    {
+      author: 'Vercel',
+      content: 'hello world',
+    },
+  ]
+
+  return {
+    props: {
+      posts,
+    },
+  }
+}
+
+function Blog({ posts }: InferGetStaticPropsType<typeof getStaticProps>) {
+  return (
+    <>
+      {posts.map((post) => (
+        <div key={post.author}>{post.author}</div>
+      ))}
+    </>
+  )
+}
+
+export default Blog

test/integration/typescript/pages/ssg/blog/index.tsx

@@ -0,0 +1,14 @@
+import { InferGetStaticPropsType } from 'next'
+
+export const getStaticProps = async () => {
+  return {
+    props: { data: ['hello', 'world'] },
+    revalidate: false,
+  }
+}
+
+export default function Page({
+  data,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return <h1>{data.join(' ')}</h1>
+}

test/integration/typescript/pages/ssr/[slug].tsx

@@ -0,0 +1,32 @@
+import { GetServerSideProps } from 'next'
+
+type Params = {
+  slug: string
+}
+
+type Props = {
+  data: string
+  title: string
+}
+
+type PreviewData = {
+  title: string
+}
+
+export const getServerSideProps: GetServerSideProps<
+  Props,
+  Params,
+  PreviewData
+> = async ({ params, previewData }) => {
+  return {
+    props: { data: params!.slug, title: previewData?.title || 'default title' },
+  }
+}
+
+export default function Page({ data, title }: Props) {
+  return (
+    <h1>
+      {data} {title}
+    </h1>
+  )
+}

test/integration/typescript/pages/ssr/blog/[post].tsx

@@ -0,0 +1,32 @@
+import { InferGetServerSidePropsType, GetServerSidePropsContext } from 'next'
+
+type Post = {
+  author: string
+  content: string
+}
+
+export const getServerSideProps = async (
+  ctx: GetServerSidePropsContext<{ post: string }>
+) => {
+  const res = await fetch(`https://.../posts/`)
+  const posts: Post[] = await res.json()
+  return {
+    props: {
+      posts,
+    },
+  }
+}
+
+function Blog({
+  posts,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  return (
+    <>
+      {posts.map((post) => (
+        <div key={post.author}>{post.author}</div>
+      ))}
+    </>
+  )
+}
+
+export default Blog

test/integration/typescript/pages/ssr/cookies.tsx

@@ -0,0 +1,18 @@
+import { GetServerSideProps } from 'next'
+
+type Props = {
+  data: string
+  cookies: any
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async ({
+  req,
+}) => {
+  return {
+    props: { data: 'hello world', cookies: req.cookies },
+  }
+}
+
+export default function Page({ cookies }: Props) {
+  return <pre id="cookies">{JSON.stringify(cookies)}</pre>
+}

test/integration/typescript/pages/ssr/promise.tsx

@@ -0,0 +1,19 @@
+import { GetServerSideProps } from 'next'
+
+type Props = {
+  data: string
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async (
+  context
+) => {
+  return {
+    props: (async function () {
+      return { data: 'some data' }
+    })(),
+  }
+}
+
+export default function Page({ data }: Props) {
+  return <h1> {data} </h1>
+}

test/integration/typescript/test/index.test.ts

@@ -0,0 +1,187 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import cheerio from 'cheerio'
+import { writeFile, remove } from 'fs-extra'
+import {
+  renderViaHTTP,
+  nextBuild,
+  findPort,
+  launchApp,
+  killApp,
+  File,
+} from 'next-test-utils'
+
+const appDir = join(__dirname, '..')
+let appPort
+let app
+let output
+
+const handleOutput = (msg) => {
+  output += msg
+}
+
+async function get$(path, query?: any, options?: any) {
+  const html = await renderViaHTTP(appPort, path, query, options)
+  return cheerio.load(html)
+}
+
+describe('TypeScript Features', () => {
+  describe('default behavior', () => {
+    beforeAll(async () => {
+      output = ''
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort, {
+        onStdout: handleOutput,
+        onStderr: handleOutput,
+      })
+    })
+    afterAll(() => killApp(app))
+
+    it('should render the page', async () => {
+      const $ = await get$('/hello')
+      expect($('body').text()).toMatch(/Hello World/)
+      expect($('body').text()).toMatch(/1000000000000/)
+    })
+
+    it('should render the cookies page', async () => {
+      const $ = await get$('/ssr/cookies')
+      expect($('#cookies').text()).toBe('{}')
+    })
+
+    it('should render the cookies page with cookies', async () => {
+      const $ = await get$(
+        '/ssr/cookies',
+        {},
+        {
+          headers: {
+            Cookie: 'key=value;',
+          },
+        }
+      )
+      expect($('#cookies').text()).toBe(`{"key":"value"}`)
+    })
+
+    it('should render the generics page', async () => {
+      const $ = await get$('/generics')
+      expect($('#value').text()).toBe('Hello World from Generic')
+    })
+
+    it('should render the angle bracket type assertions page', async () => {
+      const $ = await get$('/angle-bracket-type-assertions')
+      expect($('#value').text()).toBe('test')
+    })
+
+    // Turbopack has the correct behavior where `.ts` / `.tsx` is preferred over `.js` / `.jsx`. Webpack prefers `.js` / `.jsx`.
+    ;(process.env.IS_TURBOPACK_TEST ? it.skip : it)(
+      'should resolve files in correct order',
+      async () => {
+        const $ = await get$('/hello')
+        // eslint-disable-next-line jest/no-standalone-expect
+        expect($('#imported-value').text()).toBe('OK')
+      }
+    )
+
+    // old behavior:
+    it.skip('should report type checking to stdout', async () => {
+      expect(output).toContain('waiting for typecheck results...')
+    })
+
+    it('should respond to sync API route correctly', async () => {
+      const data = JSON.parse(await renderViaHTTP(appPort, '/api/sync'))
+      expect(data).toEqual({ code: 'ok' })
+    })
+
+    it('should respond to async API route correctly', async () => {
+      const data = JSON.parse(await renderViaHTTP(appPort, '/api/async'))
+      expect(data).toEqual({ code: 'ok' })
+    })
+
+    it('should not fail to render when an inactive page has an error', async () => {
+      await killApp(app)
+      let evilFile = join(appDir, 'pages', 'evil.tsx')
+      try {
+        await writeFile(
+          evilFile,
+          `import React from 'react'
+
+export default function EvilPage(): JSX.Element {
+  return <div notARealProp />
+}
+`
+        )
+        appPort = await findPort()
+        app = await launchApp(appDir, appPort)
+
+        const $ = await get$('/hello')
+        expect($('body').text()).toMatch(/Hello World/)
+      } finally {
+        await remove(evilFile)
+      }
+    })
+  })
+  ;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
+    'production mode',
+    () => {
+      it('should build the app', async () => {
+        const output = await nextBuild(appDir, [], { stdout: true })
+        expect(output.stdout).toMatch(/Compiled successfully/)
+        expect(output.code).toBe(0)
+      })
+
+      it('should build the app with functions in next.config.js', async () => {
+        const nextConfig = new File(join(appDir, 'next.config.js'))
+
+        nextConfig.write(`
+    module.exports = {
+      webpack(config) { return config },
+      onDemandEntries: {
+        // Make sure entries are not getting disposed.
+        maxInactiveAge: 1000 * 60 * 60,
+      },
+    }
+    `)
+
+        try {
+          const output = await nextBuild(appDir, [], { stdout: true })
+
+          expect(output.stdout).toMatch(/Compiled successfully/)
+          expect(output.code).toBe(0)
+        } finally {
+          nextConfig.restore()
+        }
+      })
+
+      it('should not inform when using default tsconfig path', async () => {
+        const output = await nextBuild(appDir, [], { stdout: true })
+        expect(output.stdout).not.toMatch(/Using tsconfig file:/)
+      })
+
+      describe('should compile with different types', () => {
+        it('should compile async getInitialProps for _error', async () => {
+          const errorPage = new File(join(appDir, 'pages/_error.tsx'))
+          try {
+            errorPage.replace('static ', 'static async ')
+            const output = await nextBuild(appDir, [], { stdout: true })
+
+            expect(output.stdout).toMatch(/Compiled successfully/)
+          } finally {
+            errorPage.restore()
+          }
+        })
+
+        it('should compile sync getStaticPaths & getStaticProps', async () => {
+          const page = new File(join(appDir, 'pages/ssg/[slug].tsx'))
+          try {
+            page.replace(/async \(/g, '(')
+            const output = await nextBuild(appDir, [], { stdout: true })
+
+            expect(output.stdout).toMatch(/Compiled successfully/)
+          } finally {
+            page.restore()
+          }
+        })
+      })
+    }
+  )
+})

test/integration/typescript/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "module": "esnext",
+    "jsx": "react-jsx",
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx"],
+  "include": ["next-env.d.ts", "components", "pages"]
+}