mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
TypeScript example proposal (#845)
* TypeScript example proposal * removed unused loader Removed typings Moved TypeScript to dev dependencies removed unused typings changed react typings version removed react dependency set next dependency version to latest removed not needed babel preset enabled sourcemaps simplified tsconfig modified component to be a functional one * Ignore build * Making npm script Windows-friendly * Clean up * Added readme * fixed typo
This commit is contained in:
parent
53c245bf63
commit
b00f0c2044
1
examples/with-typescript/.gitignore
vendored
Normal file
1
examples/with-typescript/.gitignore
vendored
Normal file
|
@ -0,0 +1 @@
|
||||||
|
**/*.js
|
22
examples/with-typescript/README.md
Normal file
22
examples/with-typescript/README.md
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
# TypeScript Next.js example
|
||||||
|
This is a really simple project that show the usage of Next.js with TypeScript.
|
||||||
|
|
||||||
|
## How to use it?
|
||||||
|
```
|
||||||
|
npm install # to install dependencies
|
||||||
|
npm run dev # to compile TypeScript files and to run next.js
|
||||||
|
```
|
||||||
|
|
||||||
|
Output JS files are aside the related TypeScript ones.
|
||||||
|
|
||||||
|
## To fix
|
||||||
|
In tsconfig.json the options `jsx="react"` compiles JSX syntax into nested React.createElement calls.
|
||||||
|
This solution doesn't work well with some Next.js features like `next/head` or `next/link`.
|
||||||
|
The workaround is to create JS files that just return the mentioned module and require them from TSX files.
|
||||||
|
Like
|
||||||
|
|
||||||
|
```js
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
|
export default Link
|
||||||
|
```
|
6
examples/with-typescript/components/MyComponent.tsx
Normal file
6
examples/with-typescript/components/MyComponent.tsx
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
import * as React from 'react'
|
||||||
|
|
||||||
|
export default () =>
|
||||||
|
<div>
|
||||||
|
<p>This is my component</p>
|
||||||
|
</div>
|
13
examples/with-typescript/package.json
Normal file
13
examples/with-typescript/package.json
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
{
|
||||||
|
"scripts": {
|
||||||
|
"dev": "concurrently \"tsc --watch\" next"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"next": "latest"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^15.0.1",
|
||||||
|
"concurrently": "^3.1.0",
|
||||||
|
"typescript": "^2.1.5"
|
||||||
|
}
|
||||||
|
}
|
8
examples/with-typescript/pages/index.tsx
Normal file
8
examples/with-typescript/pages/index.tsx
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
import * as React from 'react'
|
||||||
|
import MyComponent from '../components/MyComponent'
|
||||||
|
|
||||||
|
export default () =>
|
||||||
|
<div>
|
||||||
|
<h1>Hello world</h1>
|
||||||
|
<MyComponent />
|
||||||
|
</div>
|
8
examples/with-typescript/tsconfig.json
Normal file
8
examples/with-typescript/tsconfig.json
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"module": "commonjs",
|
||||||
|
"target": "es2015",
|
||||||
|
"jsx": "react",
|
||||||
|
"allowJs": true
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue