terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

with-typescript example updates (#5267)

Browse source 
* [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 2018-09-26 14:58:36 +07:00 committed by Henrik Wenz
parent 28a2bb36d6
commit 397daece42
7 changed files with 82 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
examples/with-typescript/README.md
View file

@ -37,4 +37,6 @@ yarn dev
## The idea behind the example ## 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
View 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

15
examples/with-typescript/package.json
View file

@ -4,17 +4,20 @@
"scripts": { "scripts": {
"dev": "next", "dev": "next",
"build": "next build", "build": "next build",
"start": "next start" "start": "next start",
"type-check": "tsc"
}, },
"dependencies": { "dependencies": {
"@zeit/next-typescript": "1.1.0", "@zeit/next-typescript": "^1.1.1",
"next": "latest", "next": "latest",
"react": "^16.2.0", "react": "^16.5.2",
"react-dom": "^16.2.0" "react-dom": "^16.5.2"
}, },
"devDependencies": { "devDependencies": {
"@types/next": "latest", "@types/next": "^6.1.7",
"@types/react": "^16.0.36" "@types/react": "^16.4.14",
"@types/react-dom": "16.0.7",
"typescript": "3.0.3"
}, },
"license": "ISC" "license": "ISC"
} }

19
examples/with-typescript/pages/_document.tsx Normal file
View 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>
)
}
}

10
examples/with-typescript/pages/about.tsx
View file

@ -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>
)

14
examples/with-typescript/pages/index.tsx
View file

@ -1,9 +1,9 @@
import Link from 'next/link' import Link from 'next/link'
import Layout from '../components/Layout';
export default () => export default () => (
<div> <Layout title="Home | Next.js + TypeScript Example">
Hello World.{' '} <h1>Hello Next.js 👋</h1>
<Link href="/about"> <p><Link href='/about'><a>About</a></Link></p>
<a>About</a> </Layout>
</Link> )
</div>

20
examples/with-typescript/tsconfig.json
View file

@ -1,26 +1,18 @@
{ {
"compileOnSave": false,
"compilerOptions": { "compilerOptions": {
"target": "esnext", "target": "esnext",
"module": "esnext", "module": "esnext",
"jsx": "preserve", "jsx": "preserve",
"allowJs": true, "lib": ["dom", "es2017"],
"moduleResolution": "node", "moduleResolution": "node",
"allowJs": true,
"noEmit": true,
"allowSyntheticDefaultImports": true, "allowSyntheticDefaultImports": true,
"skipLibCheck": true,
"noUnusedLocals": true, "noUnusedLocals": true,
"noUnusedParameters": true, "noUnusedParameters": true,
"removeComments": false, "removeComments": false,
"preserveConstEnums": true, "preserveConstEnums": true,
"sourceMap": true, "sourceMap": true
"skipLibCheck": true,
"baseUrl": ".",
"typeRoots": [
"./node_modules/@types"
],
"lib": [
"dom",
"es2015",
"es2016"
]
} }
} }