Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[with-typescript] Updated TypeScript example to use API routes #9073

Merged
merged 3 commits into from
Oct 16, 2019

Conversation

resir014
Copy link
Contributor

@resir014 resir014 commented Oct 14, 2019

Next.js 9.0.0 has been out for a while, which supports API routes, but
the examples were never updated to make use of it. This PR adds a simple
example of an API route which also makes use of dynamic routing.

A simple fetch() wrapper is also added for example purposes, and the
pages structure have also been refactored to dynamic routing.

Next.js 9.0.0 has been out for a while, which supports API routes, but
the examples were never updated to make use of it. This PR adds a simple
example of an API route which also makes use of dynamic routing.

A simple `fetch()` wrapper is also added for example purposes, and the
pages structure have also been updated to dynamic routing.
@ijjk
Copy link
Member

ijjk commented Oct 14, 2019

Stats from current PR

Default Server Mode
General
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
buildDuration 14.9s 15.1s ⚠️ +273ms
nodeModulesSize 48.5 MB 48.5 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
main-HASH.js 18.9 kB 18.9 kB
main-HASH.js gzip 6.79 kB 6.79 kB
webpack-HASH.js 1.53 kB 1.53 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..9dda6167a.js 21.9 kB 21.9 kB
4952ddcd88e7..167a.js gzip 7.81 kB 7.81 kB
de003c3a9d30..3a0560775.js 43.2 kB 43.2 kB
de003c3a9d30..0775.js gzip 15.5 kB 15.5 kB
framework.5b..dbaff70d3.js 125 kB 125 kB
framework.5b..70d3.js gzip 39.4 kB 39.4 kB
Overall change 211 kB 211 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
main-HASH.module.js 17.2 kB 17.2 kB
main-HASH.module.js gzip 6.52 kB 6.52 kB
webpack-HASH.module.js 1.53 kB 1.53 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..72.module.js 45.6 kB 45.6 kB
de003c3a9d30..dule.js gzip 16.5 kB 16.5 kB
framework.5b..d3.module.js 125 kB 125 kB
framework.5b..dule.js gzip 39.4 kB 39.4 kB
Overall change 190 kB 190 kB
Client Pages
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
_app.js 1.81 kB 1.81 kB
_app.js gzip 873 B 873 B
_error.js 12 kB 12 kB
_error.js gzip 4.73 kB 4.73 kB
hooks.js 12.7 kB 12.7 kB
hooks.js gzip 4.79 kB 4.79 kB
index.js 318 B 318 B
index.js gzip 222 B 222 B
link.js 8.14 kB 8.14 kB
link.js gzip 3.5 kB 3.5 kB
routerDirect.js 408 B 408 B
routerDirect.js gzip 281 B 281 B
withRouter.js 419 B 419 B
withRouter.js gzip 280 B 280 B
Overall change 35.8 kB 35.8 kB
Client Pages Modern
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
_app.module.js 1.7 kB 1.7 kB
_app.module.js gzip 832 B 832 B
_error.module.js 23.3 kB 23.3 kB
_error.module.js gzip 8.59 kB 8.59 kB
hooks.module.js 1.52 kB 1.52 kB
hooks.module.js gzip 793 B 793 B
index.module.js 294 B 294 B
index.module.js gzip 223 B 223 B
link.module.js 8.53 kB 8.53 kB
link.module.js gzip 3.68 kB 3.68 kB
routerDirect.module.js 394 B 394 B
routerDirect..dule.js gzip 281 B 281 B
withRouter.module.js 404 B 404 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 36.1 kB 36.1 kB
Client Build Manifests
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
_buildManifest.js 81 B 81 B
_buildManifest.js gzip 61 B 61 B
_buildManifest.module.js 81 B 81 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 162 B 162 B
Rendered Page Sizes
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
index.html 3.62 kB 3.62 kB
index.html gzip 946 B 946 B
link.html 3.66 kB 3.66 kB
link.html gzip 954 B 954 B
withRouter.html 3.67 kB 3.67 kB
withRouter.html gzip 941 B 941 B
Overall change 10.9 kB 10.9 kB

Serverless Mode
General
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
buildDuration 14.9s 14.9s ⚠️ +31ms
nodeModulesSize 48.5 MB 48.5 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
main-HASH.js 18.9 kB 18.9 kB
main-HASH.js gzip 6.79 kB 6.79 kB
webpack-HASH.js 1.53 kB 1.53 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..9dda6167a.js 21.9 kB 21.9 kB
4952ddcd88e7..167a.js gzip 7.81 kB 7.81 kB
de003c3a9d30..3a0560775.js 43.2 kB 43.2 kB
de003c3a9d30..0775.js gzip 15.5 kB 15.5 kB
framework.5b..dbaff70d3.js 125 kB 125 kB
framework.5b..70d3.js gzip 39.4 kB 39.4 kB
Overall change 211 kB 211 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
main-HASH.module.js 17.2 kB 17.2 kB
main-HASH.module.js gzip 6.52 kB 6.52 kB
webpack-HASH.module.js 1.53 kB 1.53 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..72.module.js 45.6 kB 45.6 kB
de003c3a9d30..dule.js gzip 16.5 kB 16.5 kB
framework.5b..d3.module.js 125 kB 125 kB
framework.5b..dule.js gzip 39.4 kB 39.4 kB
Overall change 190 kB 190 kB
Client Pages
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
_app.js 1.81 kB 1.81 kB
_app.js gzip 873 B 873 B
_error.js 12 kB 12 kB
_error.js gzip 4.73 kB 4.73 kB
hooks.js 12.7 kB 12.7 kB
hooks.js gzip 4.79 kB 4.79 kB
index.js 318 B 318 B
index.js gzip 222 B 222 B
link.js 8.14 kB 8.14 kB
link.js gzip 3.5 kB 3.5 kB
routerDirect.js 408 B 408 B
routerDirect.js gzip 281 B 281 B
withRouter.js 419 B 419 B
withRouter.js gzip 280 B 280 B
Overall change 35.8 kB 35.8 kB
Client Pages Modern
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
_app.module.js 1.7 kB 1.7 kB
_app.module.js gzip 832 B 832 B
_error.module.js 23.3 kB 23.3 kB
_error.module.js gzip 8.59 kB 8.59 kB
hooks.module.js 1.52 kB 1.52 kB
hooks.module.js gzip 793 B 793 B
index.module.js 294 B 294 B
index.module.js gzip 223 B 223 B
link.module.js 8.53 kB 8.53 kB
link.module.js gzip 3.68 kB 3.68 kB
routerDirect.module.js 394 B 394 B
routerDirect..dule.js gzip 281 B 281 B
withRouter.module.js 404 B 404 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 36.1 kB 36.1 kB
Client Build Manifests
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
_buildManifest.js 81 B 81 B
_buildManifest.js gzip 61 B 61 B
_buildManifest.module.js 81 B 81 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 162 B 162 B
Serverless bundles
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
_error.js 254 kB 254 kB
_error.js gzip 68 kB 68 kB
hooks.html 3.75 kB 3.75 kB
hooks.html gzip 979 B 979 B
index.js 254 kB 254 kB
index.js gzip 68.4 kB 68.4 kB
link.js 262 kB 262 kB
link.js gzip 70.4 kB 70.4 kB
routerDirect.js 255 kB 255 kB
routerDirect.js gzip 68.4 kB 68.4 kB
withRouter.js 255 kB 255 kB
withRouter.js gzip 68.5 kB 68.5 kB
Overall change 1.28 MB 1.28 MB

Commit: c8fdb91

@ijjk
Copy link
Member

ijjk commented Oct 15, 2019

Stats from current PR

Default Server Mode
General
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
buildDuration 15.8s 15.7s -25ms
nodeModulesSize 48.5 MB 48.5 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
main-HASH.js 18.9 kB 18.9 kB
main-HASH.js gzip 6.79 kB 6.79 kB
webpack-HASH.js 1.53 kB 1.53 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..9dda6167a.js 21.9 kB 21.9 kB
4952ddcd88e7..167a.js gzip 7.81 kB 7.81 kB
de003c3a9d30..3a0560775.js 43.2 kB 43.2 kB
de003c3a9d30..0775.js gzip 15.5 kB 15.5 kB
framework.5b..dbaff70d3.js 125 kB 125 kB
framework.5b..70d3.js gzip 39.4 kB 39.4 kB
Overall change 211 kB 211 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
main-HASH.module.js 17.2 kB 17.2 kB
main-HASH.module.js gzip 6.52 kB 6.52 kB
webpack-HASH.module.js 1.53 kB 1.53 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..72.module.js 45.6 kB 45.6 kB
de003c3a9d30..dule.js gzip 16.5 kB 16.5 kB
framework.5b..d3.module.js 125 kB 125 kB
framework.5b..dule.js gzip 39.4 kB 39.4 kB
Overall change 190 kB 190 kB
Client Pages
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
_app.js 1.81 kB 1.81 kB
_app.js gzip 873 B 873 B
_error.js 12 kB 12 kB
_error.js gzip 4.73 kB 4.73 kB
hooks.js 12.7 kB 12.7 kB
hooks.js gzip 4.79 kB 4.79 kB
index.js 318 B 318 B
index.js gzip 222 B 222 B
link.js 8.14 kB 8.14 kB
link.js gzip 3.5 kB 3.5 kB
routerDirect.js 408 B 408 B
routerDirect.js gzip 281 B 281 B
withRouter.js 419 B 419 B
withRouter.js gzip 280 B 280 B
Overall change 35.8 kB 35.8 kB
Client Pages Modern
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
_app.module.js 1.7 kB 1.7 kB
_app.module.js gzip 832 B 832 B
_error.module.js 23.3 kB 23.3 kB
_error.module.js gzip 8.59 kB 8.59 kB
hooks.module.js 1.52 kB 1.52 kB
hooks.module.js gzip 793 B 793 B
index.module.js 294 B 294 B
index.module.js gzip 223 B 223 B
link.module.js 8.53 kB 8.53 kB
link.module.js gzip 3.68 kB 3.68 kB
routerDirect.module.js 394 B 394 B
routerDirect..dule.js gzip 281 B 281 B
withRouter.module.js 404 B 404 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 36.1 kB 36.1 kB
Client Build Manifests
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
_buildManifest.js 81 B 81 B
_buildManifest.js gzip 61 B 61 B
_buildManifest.module.js 81 B 81 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 162 B 162 B
Rendered Page Sizes
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
index.html 3.62 kB 3.62 kB
index.html gzip 946 B 946 B
link.html 3.66 kB 3.66 kB
link.html gzip 954 B 954 B
withRouter.html 3.67 kB 3.67 kB
withRouter.html gzip 941 B 941 B
Overall change 10.9 kB 10.9 kB

Serverless Mode
General
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
buildDuration 15.9s 15.9s -27ms
nodeModulesSize 48.5 MB 48.5 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
main-HASH.js 18.9 kB 18.9 kB
main-HASH.js gzip 6.79 kB 6.79 kB
webpack-HASH.js 1.53 kB 1.53 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..9dda6167a.js 21.9 kB 21.9 kB
4952ddcd88e7..167a.js gzip 7.81 kB 7.81 kB
de003c3a9d30..3a0560775.js 43.2 kB 43.2 kB
de003c3a9d30..0775.js gzip 15.5 kB 15.5 kB
framework.5b..dbaff70d3.js 125 kB 125 kB
framework.5b..70d3.js gzip 39.4 kB 39.4 kB
Overall change 211 kB 211 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
main-HASH.module.js 17.2 kB 17.2 kB
main-HASH.module.js gzip 6.52 kB 6.52 kB
webpack-HASH.module.js 1.53 kB 1.53 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..72.module.js 45.6 kB 45.6 kB
de003c3a9d30..dule.js gzip 16.5 kB 16.5 kB
framework.5b..d3.module.js 125 kB 125 kB
framework.5b..dule.js gzip 39.4 kB 39.4 kB
Overall change 190 kB 190 kB
Client Pages
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
_app.js 1.81 kB 1.81 kB
_app.js gzip 873 B 873 B
_error.js 12 kB 12 kB
_error.js gzip 4.73 kB 4.73 kB
hooks.js 12.7 kB 12.7 kB
hooks.js gzip 4.79 kB 4.79 kB
index.js 318 B 318 B
index.js gzip 222 B 222 B
link.js 8.14 kB 8.14 kB
link.js gzip 3.5 kB 3.5 kB
routerDirect.js 408 B 408 B
routerDirect.js gzip 281 B 281 B
withRouter.js 419 B 419 B
withRouter.js gzip 280 B 280 B
Overall change 35.8 kB 35.8 kB
Client Pages Modern
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
_app.module.js 1.7 kB 1.7 kB
_app.module.js gzip 832 B 832 B
_error.module.js 23.3 kB 23.3 kB
_error.module.js gzip 8.59 kB 8.59 kB
hooks.module.js 1.52 kB 1.52 kB
hooks.module.js gzip 793 B 793 B
index.module.js 294 B 294 B
index.module.js gzip 223 B 223 B
link.module.js 8.53 kB 8.53 kB
link.module.js gzip 3.68 kB 3.68 kB
routerDirect.module.js 394 B 394 B
routerDirect..dule.js gzip 281 B 281 B
withRouter.module.js 404 B 404 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 36.1 kB 36.1 kB
Client Build Manifests
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
_buildManifest.js 81 B 81 B
_buildManifest.js gzip 61 B 61 B
_buildManifest.module.js 81 B 81 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 162 B 162 B
Serverless bundles
zeit/next.js canary resir014/next.js feature/typescript-api-routes Change
_error.js 254 kB 254 kB
_error.js gzip 68 kB 68 kB
hooks.html 3.75 kB 3.75 kB
hooks.html gzip 979 B 979 B
index.js 254 kB 254 kB
index.js gzip 68.4 kB 68.4 kB
link.js 262 kB 262 kB
link.js gzip 70.4 kB 70.4 kB
routerDirect.js 255 kB 255 kB
routerDirect.js gzip 68.4 kB 68.4 kB
withRouter.js 255 kB 255 kB
withRouter.js gzip 68.5 kB 68.5 kB
Overall change 1.28 MB 1.28 MB

Commit: b704d1d

Copy link
Member

@lfades lfades left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @resir014 thank you for the PR, this changes introduces more complexity into the example but I do like it as a way of showing API types, which is the point of the example.

I updated the link for the dynamic route and it should be ready to go 👍

@lfades lfades merged commit 42bf210 into vercel:canary Oct 16, 2019
@resir014
Copy link
Contributor Author

Thanks @lfades! Would you mind if I work on another PR splitting this example into two, one for the most basic TS example for a quickstart, and the other for TS + API routes?

I can work on it sometime next week.

@lfades
Copy link
Member

lfades commented Oct 20, 2019

@resir014 It's good right now, way better than having it separated, thank you 👍

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants