import {ArticleLayout} from '@/components/layouts/ArticleLayout'
import {createSlug} from '@/lib/createSlug'

export const meta = {
    author: 'Ryan Freeman',
    date: '2023-01-02',
    title: 'How to add TypeScript to an existing Next.js project',
    description: 'Next.js includes support for TypeScript by default. To add TypeScript to an existing Next.js project create a tsconfig.json file in the project root with touch tsconfig.json.',
}

export default (props) => <ArticleLayout
    author={meta.author}
    date={meta.date}
    title={meta.title}
    description={meta.description}
    slug={createSlug(meta.title)}
    {...props} />

# Next.js includes support for TypeScript by default. To add TypeScript to an existing Next.js project create a _tsconfig.json_ file in the project root with `touch tsconfig.json`.
Next, run `next dev` and the _tsconfig.json_ file will be populated with the default values, you may customise this configuration to your liking. A file called _next-env.d.ts_ will be created at the project root, this file **should not** be removed or edited.

However, you should add an entry in your `.gitignore` for _next-env.d.ts_ so it is ignored by version control.

```json
"include": [
    "next-env.d.ts",
    "additional.d.ts"
    "**/*.ts",
    "**/*.tsx"
]
```

If you need to add additional types, create a _additional.d.ts_ file in your project root and reference it in the `include` array in _tsconfig.json_.

```json
    "strict": true
```

For experienced TypeScript developers, you can enable `strict` mode by editing _tsconfig.json_, this setting is disabled by default.

That's it! Your Next.js project is ready to leverage the power of TypeScript.


