You don't need a custom webpack config (althouh it would be nice). There's nothing preventing you from using typescript as-is. For example:

tsconfig.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "noImplicitAny": false,
        "sourceMap": false
    }
}

As I don't think next.js has any typings (yet), you might need a next.d.ts file in the typings folder to define some things. For example:

next.d.ts:

declare module 'next/head' {
    import * as React from 'react';

    export default class Head extends React.Component<any, any> {}
}

declare module 'next/link' {
    import * as React from 'react';

    export default class Link extends React.Component<any, any> {}
}

That should get you rolling. You can use the same approach for other next specific modules.

To make the workflow a little smoother you can run node_modules/.bin/tsc --watch (or just tsc --watch if you have TypeScript installed globally) along with next, so that changes to your .tsx files get compiled automatically and cause next.js to reload.

Add typescript example #96

Description

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions