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

Added with-ts-node with Next js 7 example (#5204)

### Next js 7+ and Typescript 3+ Example

No babel, tsc, pure typescript usage
Made by [next-with-typescript plugin](https://github.com/echoulen/next-with-typescript)
This commit is contained in:
Carlos 2018-09-29 03:18:50 +08:00 committed by Tim Neutkens
parent 70c4b3d11c
commit 565b026e7b
9 changed files with 144 additions and 0 deletions

View file

@ -0,0 +1,45 @@
[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-ts-node)
# Custom server with fully TypeScript + ts-node example (without babel and tsc), require next js 7+
## How to use
### Using `create-next-app`
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
```bash
npx create-next-app --example with-ts-node with-ts-node-app
# or
yarn create next-app --example with-ts-node with-ts-node-app
```
### Download manually
Download the example:
```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-ts-node
cd with-ts-node
```
Install it and run:
```bash
npm install
npm run dev
# or
yarn
yarn dev
```
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
```bash
now
```
## The idea behind the example
The example shows how you can use [TypeScript](https://typescriptlang.com) on both the server and the client while using [Nodemon](https://nodemon.io/) to live reload the server code without affecting the Next.js universal code.
Server entry point is `server/index.ts` in development and production.

View file

@ -0,0 +1,2 @@
const withTypescript = require('next-with-typescript')
module.exports = withTypescript()

View file

@ -0,0 +1,6 @@
{
"watch": ["server/**/*.ts"],
"execMap": {
"ts": "ts-node --typeCheck --compilerOptions '{\"module\":\"commonjs\"}'"
}
}

View file

@ -0,0 +1,22 @@
{
"scripts": {
"dev": "nodemon server/index.ts",
"build": "next build",
"start": "NODE_ENV=production ts-node --compilerOptions '{\"module\":\"commonjs\"}' server/index.ts"
},
"dependencies": {
"@types/next": "^2.4.11",
"@types/react": "^16.0.36",
"next": "^7.0.0",
"next-with-typescript": "1.0.0",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"ts-loader": "5.1.1",
"ts-node": "^7.0.1",
"typescript": "latest",
"typescript-babel-jest": "^1.0.5"
},
"devDependencies": {
"nodemon": "^1.17.5"
}
}

View file

@ -0,0 +1,3 @@
import React from 'react'
export default () => <div>a</div>

View file

@ -0,0 +1,3 @@
import React from 'react'
export default () => <div>b</div>

View file

@ -0,0 +1,9 @@
import React from 'react'
import Link from 'next/link'
export default () => (
<ul>
<li><Link href='/a' as='/a'><a>a</a></Link></li>
<li><Link href='/b' as='/b'><a>b</a></Link></li>
</ul>
)

View file

@ -0,0 +1,27 @@
import { createServer } from 'http'
import { parse } from 'url'
import * as next from 'next'
const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
app.prepare().then(() => {
createServer((req, res) => {
const parsedUrl = parse(req.url, true);
const { pathname, query } = parsedUrl;
if (pathname === '/a') {
app.render(req, res, '/a', query)
} else if (pathname === '/b') {
app.render(req, res, '/b', query)
} else {
handle(req, res, parsedUrl)
}
})
.listen(port, (err) => {
if (err) throw err
console.log(`> Ready on http://localhost:${port}`)
})
});

View file

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