From 565b026e7b1fc8507a8905e5e72c8c2829790b7d Mon Sep 17 00:00:00 2001 From: Carlos Date: Sat, 29 Sep 2018 03:18:50 +0800 Subject: [PATCH] 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) --- examples/with-ts-node/README.md | 45 +++++++++++++++++++++++++++ examples/with-ts-node/next.config.js | 2 ++ examples/with-ts-node/nodemon.json | 6 ++++ examples/with-ts-node/package.json | 22 +++++++++++++ examples/with-ts-node/pages/a.tsx | 3 ++ examples/with-ts-node/pages/b.tsx | 3 ++ examples/with-ts-node/pages/index.tsx | 9 ++++++ examples/with-ts-node/server/index.ts | 27 ++++++++++++++++ examples/with-ts-node/tsconfig.json | 27 ++++++++++++++++ 9 files changed, 144 insertions(+) create mode 100644 examples/with-ts-node/README.md create mode 100644 examples/with-ts-node/next.config.js create mode 100644 examples/with-ts-node/nodemon.json create mode 100644 examples/with-ts-node/package.json create mode 100644 examples/with-ts-node/pages/a.tsx create mode 100644 examples/with-ts-node/pages/b.tsx create mode 100644 examples/with-ts-node/pages/index.tsx create mode 100644 examples/with-ts-node/server/index.ts create mode 100644 examples/with-ts-node/tsconfig.json diff --git a/examples/with-ts-node/README.md b/examples/with-ts-node/README.md new file mode 100644 index 00000000..d93b178f --- /dev/null +++ b/examples/with-ts-node/README.md @@ -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. diff --git a/examples/with-ts-node/next.config.js b/examples/with-ts-node/next.config.js new file mode 100644 index 00000000..5e28bb40 --- /dev/null +++ b/examples/with-ts-node/next.config.js @@ -0,0 +1,2 @@ +const withTypescript = require('next-with-typescript') +module.exports = withTypescript() diff --git a/examples/with-ts-node/nodemon.json b/examples/with-ts-node/nodemon.json new file mode 100644 index 00000000..2df1d50d --- /dev/null +++ b/examples/with-ts-node/nodemon.json @@ -0,0 +1,6 @@ +{ + "watch": ["server/**/*.ts"], + "execMap": { + "ts": "ts-node --typeCheck --compilerOptions '{\"module\":\"commonjs\"}'" + } +} diff --git a/examples/with-ts-node/package.json b/examples/with-ts-node/package.json new file mode 100644 index 00000000..bf3f4a1d --- /dev/null +++ b/examples/with-ts-node/package.json @@ -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" + } +} diff --git a/examples/with-ts-node/pages/a.tsx b/examples/with-ts-node/pages/a.tsx new file mode 100644 index 00000000..c5359797 --- /dev/null +++ b/examples/with-ts-node/pages/a.tsx @@ -0,0 +1,3 @@ +import React from 'react' + +export default () =>
a
diff --git a/examples/with-ts-node/pages/b.tsx b/examples/with-ts-node/pages/b.tsx new file mode 100644 index 00000000..9bde4d9d --- /dev/null +++ b/examples/with-ts-node/pages/b.tsx @@ -0,0 +1,3 @@ +import React from 'react' + +export default () =>
b
diff --git a/examples/with-ts-node/pages/index.tsx b/examples/with-ts-node/pages/index.tsx new file mode 100644 index 00000000..0e22b819 --- /dev/null +++ b/examples/with-ts-node/pages/index.tsx @@ -0,0 +1,9 @@ +import React from 'react' +import Link from 'next/link' + +export default () => ( + +) diff --git a/examples/with-ts-node/server/index.ts b/examples/with-ts-node/server/index.ts new file mode 100644 index 00000000..6d15fa39 --- /dev/null +++ b/examples/with-ts-node/server/index.ts @@ -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}`) + }) +}); diff --git a/examples/with-ts-node/tsconfig.json b/examples/with-ts-node/tsconfig.json new file mode 100644 index 00000000..87a7898a --- /dev/null +++ b/examples/with-ts-node/tsconfig.json @@ -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" + ] + } +}