mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
with-typescript example updates (#5267)
* [with-typescript] Updated `@zeit/next-typescript` and typescript typings * [with-typescript] Updated tsconfig to match new recommended config * [with-typescript] upgraded dependencies, implement type-checking * [with-typescript] add _document example, fixed tsconfig * [with-typescript] updated README * [with-typescript] updated example contents * [with-typescript] adopt the Layout component from Flow example
This commit is contained in:
Resi Respati
Henrik Wenz
parent
28a2bb36d6
commit
397daece42
|
|
@ -37,4 +37,6 @@ yarn dev
|
|||
|
||||
## The idea behind the example
|
||||
|
||||
Use the [@zeit/next-typescript](https://github.com/zeit/next-plugins/tree/master/packages/next-typescript) plugin to inject the Webpack config required to compile TypeScript to JavaScript. For information about using a TSConfig have a [look at the plugin page](https://github.com/zeit/next-plugins/tree/master/packages/next-typescript/#readme).
|
||||
Use the [@zeit/next-typescript](https://github.com/zeit/next-plugins/tree/master/packages/next-typescript) plugin to inject [@babel/preset-typescript](https://github.com/babel/babel/tree/master/packages/babel-preset-typescript) into Next.js, allowing for fast TypeScript transpilation. It also implements a `tsconfig.json` as recommended by [the @zeit/next-typescript plugin page](https://github.com/zeit/next-plugins/tree/master/packages/next-typescript/#readme).
|
||||
|
||||
A `type-check` script is also added to `package.json`, which runs TypeScript's `tsc` CLI in `noEmit` mode to run type-checking separately. You can then include this in your `test` scripts, say, for your CI process.
|
||||
|
|
|
|||
29
examples/with-typescript/components/Layout.tsx
Normal file
29
examples/with-typescript/components/Layout.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import * as React from 'react'
|
||||
import Link from 'next/link'
|
||||
import Head from 'next/head'
|
||||
|
||||
type Props = {
|
||||
title?: string
|
||||
}
|
||||
|
||||
const Layout: React.SFC<Props> = ({ children, title = 'This is the default title' }) => (
|
||||
<div>
|
||||
<Head>
|
||||
<title>{title}</title>
|
||||
<meta charSet='utf-8' />
|
||||
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
|
||||
</Head>
|
||||
<header>
|
||||
<nav>
|
||||
<Link href='/'><a>Home</a></Link> |{' '}
|
||||
<Link href='/about'><a>About</a></Link>
|
||||
</nav>
|
||||
</header>
|
||||
{children}
|
||||
<footer>
|
||||
I'm here to stay
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default Layout
|
||||
|
|
@ -4,17 +4,20 @@
|
|||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
"start": "next start",
|
||||
"type-check": "tsc"
|
||||
},
|
||||
"dependencies": {
|
||||
"@zeit/next-typescript": "1.1.0",
|
||||
"@zeit/next-typescript": "^1.1.1",
|
||||
"next": "latest",
|
||||
"react": "^16.2.0",
|
||||
"react-dom": "^16.2.0"
|
||||
"react": "^16.5.2",
|
||||
"react-dom": "^16.5.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/next": "latest",
|
||||
"@types/react": "^16.0.36"
|
||||
"@types/next": "^6.1.7",
|
||||
"@types/react": "^16.4.14",
|
||||
"@types/react-dom": "16.0.7",
|
||||
"typescript": "3.0.3"
|
||||
},
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
|
|||
19
examples/with-typescript/pages/_document.tsx
Normal file
19
examples/with-typescript/pages/_document.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import React from 'react'
|
||||
import Document, { Head, Main, NextScript } from 'next/document'
|
||||
|
||||
// Document component is strongly typed with `@types/next`
|
||||
export default class MyDocument extends Document {
|
||||
render () {
|
||||
return (
|
||||
<html lang="en">
|
||||
<Head>
|
||||
<title>Next.js TypeScript Example</title>
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +1,9 @@
|
|||
export default () => <div>About us</div>
|
||||
import Link from 'next/link'
|
||||
import Layout from '../components/Layout';
|
||||
|
||||
export default () => (
|
||||
<Layout title="About | Next.js + TypeScript Example">
|
||||
<p>This is the about page</p>
|
||||
<p><Link href='/'><a>Go home</a></Link></p>
|
||||
</Layout>
|
||||
)
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import Link from 'next/link'
|
||||
import Layout from '../components/Layout';
|
||||
|
||||
export default () =>
|
||||
<div>
|
||||
Hello World.{' '}
|
||||
<Link href="/about">
|
||||
<a>About</a>
|
||||
</Link>
|
||||
</div>
|
||||
export default () => (
|
||||
<Layout title="Home | Next.js + TypeScript Example">
|
||||
<h1>Hello Next.js 👋</h1>
|
||||
<p><Link href='/about'><a>About</a></Link></p>
|
||||
</Layout>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,26 +1,18 @@
|
|||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"module": "esnext",
|
||||
"jsx": "preserve",
|
||||
"allowJs": true,
|
||||
"lib": ["dom", "es2017"],
|
||||
"moduleResolution": "node",
|
||||
"allowJs": true,
|
||||
"noEmit": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"skipLibCheck": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"removeComments": false,
|
||||
"preserveConstEnums": true,
|
||||
"sourceMap": true,
|
||||
"skipLibCheck": true,
|
||||
"baseUrl": ".",
|
||||
"typeRoots": [
|
||||
"./node_modules/@types"
|
||||
],
|
||||
"lib": [
|
||||
"dom",
|
||||
"es2015",
|
||||
"es2016"
|
||||
]
|
||||
"sourceMap": true
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue