-
Notifications
You must be signed in to change notification settings - Fork 27.2k
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
feat(create-next-app): add --ts, --typescript
support
#24655
feat(create-next-app): add --ts, --typescript
support
#24655
Conversation
This unused variable in a template was originally removed in order to prevent ESLint from throwing.
-t, --typescript
option for create-next-app
--ts, --typescript
option for create-next-app
--ts, --typescript
option for create-next-app
--ts, --typescript
support
PRs are reviewed, you opened a feature request which was converted to discussions: #24654. As per the issue template all feature requests get moved to discussions to ensure others can comment/discuss and upvote the feature request: Specifically this message: |
Big thumbs up from me regarding strict mode, will appreciate not having to set that each time. Actively did not change that line because I recalled docs saying something about not enabling it by default. Good work on other changes as well, nice catch on |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks good to land now, thanks for the PR! 💯
Strict mode can be enabled by default for new apps, we don't enable it by default for existing apps as it's likely to break in those cases.
I've also added types to the template to ensure strict mode is compatible and added a note to the getting started section of the docs 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, test looks good also.
Thanks Tim. Good work! |
This comment has been minimized.
This comment has been minimized.
Stats from current PRDefault Server Mode (Increase detected
|
vercel/next.js canary | ctjlewis/next.js create-next-app-typescript | Change | |
---|---|---|---|
buildDuration | 11.9s | 11.5s | -394ms |
buildDurationCached | 4s | 3.7s | -336ms |
nodeModulesSize | 46.6 MB | 46.6 MB | ✓ |
Page Load Tests Overall increase ✓
vercel/next.js canary | ctjlewis/next.js create-next-app-typescript | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 2.762 | 1.998 | -0.76 |
/ avg req/sec | 905.14 | 1251.43 | +346.29 |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.356 | 1.092 | -0.26 |
/error-in-render avg req/sec | 1844.32 | 2288.33 | +444.01 |
Client Bundles (main, webpack, commons)
vercel/next.js canary | ctjlewis/next.js create-next-app-typescript | Change | |
---|---|---|---|
framework-HASH.js gzip | 39.3 kB | 39.3 kB | ✓ |
main-HASH.js gzip | 19.3 kB | 19.3 kB | ✓ |
webpack-HASH.js gzip | 996 B | 996 B | ✓ |
Overall change | 59.6 kB | 59.6 kB | ✓ |
Legacy Client Bundles (polyfills)
vercel/next.js canary | ctjlewis/next.js create-next-app-typescript | Change | |
---|---|---|---|
polyfills-HASH.js gzip | 31.1 kB | 31.1 kB | ✓ |
Overall change | 31.1 kB | 31.1 kB | ✓ |
Client Pages
vercel/next.js canary | ctjlewis/next.js create-next-app-typescript | Change | |
---|---|---|---|
_app-HASH.js gzip | 1.02 kB | 1.02 kB | ✓ |
_error-HASH.js gzip | 3.05 kB | 3.05 kB | ✓ |
amp-HASH.js gzip | 526 B | 526 B | ✓ |
css-HASH.js gzip | 334 B | 334 B | ✓ |
hooks-HASH.js gzip | 890 B | 890 B | ✓ |
index-HASH.js gzip | 262 B | 262 B | ✓ |
link-HASH.js gzip | 1.65 kB | 1.65 kB | ✓ |
routerDirect..HASH.js gzip | 331 B | 331 B | ✓ |
withRouter-HASH.js gzip | 329 B | 329 B | ✓ |
99a142a5cfae..804.css gzip | 125 B | 125 B | ✓ |
Overall change | 8.52 kB | 8.52 kB | ✓ |
Client Build Manifests
vercel/next.js canary | ctjlewis/next.js create-next-app-typescript | Change | |
---|---|---|---|
_buildManifest.js gzip | 394 B | 394 B | ✓ |
Overall change | 394 B | 394 B | ✓ |
Rendered Page Sizes
vercel/next.js canary | ctjlewis/next.js create-next-app-typescript | Change | |
---|---|---|---|
index.html gzip | 560 B | 560 B | ✓ |
link.html gzip | 569 B | 569 B | ✓ |
withRouter.html gzip | 557 B | 557 B | ✓ |
Overall change | 1.69 kB | 1.69 kB | ✓ |
Serverless Mode
General
vercel/next.js canary | ctjlewis/next.js create-next-app-typescript | Change | |
---|---|---|---|
buildDuration | 14.7s | 14.4s | -316ms |
buildDurationCached | 5.5s | 5.7s | |
nodeModulesSize | 46.6 MB | 46.6 MB | ✓ |
Client Bundles (main, webpack, commons)
vercel/next.js canary | ctjlewis/next.js create-next-app-typescript | Change | |
---|---|---|---|
framework-HASH.js gzip | 39.3 kB | 39.3 kB | ✓ |
main-HASH.js gzip | 19.3 kB | 19.3 kB | ✓ |
webpack-HASH.js gzip | 996 B | 996 B | ✓ |
Overall change | 59.6 kB | 59.6 kB | ✓ |
Legacy Client Bundles (polyfills)
vercel/next.js canary | ctjlewis/next.js create-next-app-typescript | Change | |
---|---|---|---|
polyfills-HASH.js gzip | 31.1 kB | 31.1 kB | ✓ |
Overall change | 31.1 kB | 31.1 kB | ✓ |
Client Pages
vercel/next.js canary | ctjlewis/next.js create-next-app-typescript | Change | |
---|---|---|---|
_app-HASH.js gzip | 1.02 kB | 1.02 kB | ✓ |
_error-HASH.js gzip | 3.05 kB | 3.05 kB | ✓ |
amp-HASH.js gzip | 526 B | 526 B | ✓ |
css-HASH.js gzip | 334 B | 334 B | ✓ |
hooks-HASH.js gzip | 890 B | 890 B | ✓ |
index-HASH.js gzip | 262 B | 262 B | ✓ |
link-HASH.js gzip | 1.65 kB | 1.65 kB | ✓ |
routerDirect..HASH.js gzip | 331 B | 331 B | ✓ |
withRouter-HASH.js gzip | 329 B | 329 B | ✓ |
99a142a5cfae..804.css gzip | 125 B | 125 B | ✓ |
Overall change | 8.52 kB | 8.52 kB | ✓ |
Client Build Manifests
vercel/next.js canary | ctjlewis/next.js create-next-app-typescript | Change | |
---|---|---|---|
_buildManifest.js gzip | 394 B | 394 B | ✓ |
Overall change | 394 B | 394 B | ✓ |
Serverless bundles
vercel/next.js canary | ctjlewis/next.js create-next-app-typescript | Change | |
---|---|---|---|
_error.js | 1.34 MB | 1.34 MB | ✓ |
404.html | 2.42 kB | 2.42 kB | ✓ |
500.html | 2.41 kB | 2.41 kB | ✓ |
amp.amp.html | 10.8 kB | 10.8 kB | ✓ |
amp.html | 1.61 kB | 1.61 kB | ✓ |
css.html | 1.79 kB | 1.79 kB | ✓ |
hooks.html | 1.67 kB | 1.67 kB | ✓ |
index.js | 1.35 MB | 1.35 MB | ✓ |
link.js | 1.4 MB | 1.4 MB | ✓ |
routerDirect.js | 1.39 MB | 1.39 MB | ✓ |
withRouter.js | 1.39 MB | 1.39 MB | ✓ |
Overall change | 6.9 MB | 6.9 MB | ✓ |
Webpack 4 Mode (Decrease detected ✓)
General
vercel/next.js canary | ctjlewis/next.js create-next-app-typescript | Change | |
---|---|---|---|
buildDuration | 10.2s | 10.1s | -40ms |
buildDurationCached | 4.1s | 4.3s | |
nodeModulesSize | 46.6 MB | 46.6 MB | ✓ |
Page Load Tests Overall decrease ⚠️
vercel/next.js canary | ctjlewis/next.js create-next-app-typescript | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 1.997 | 2.047 | |
/ avg req/sec | 1251.68 | 1221.16 | |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.046 | 1.096 | |
/error-in-render avg req/sec | 2390.61 | 2280 |
Client Bundles (main, webpack, commons)
vercel/next.js canary | ctjlewis/next.js create-next-app-typescript | Change | |
---|---|---|---|
677f882d2ed8..HASH.js gzip | 13.3 kB | 13.3 kB | ✓ |
framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
main-HASH.js gzip | 7.19 kB | 7.19 kB | ✓ |
webpack-HASH.js gzip | 751 B | 751 B | ✓ |
Overall change | 60.2 kB | 60.2 kB | ✓ |
Legacy Client Bundles (polyfills)
vercel/next.js canary | ctjlewis/next.js create-next-app-typescript | Change | |
---|---|---|---|
polyfills-HASH.js gzip | 31.3 kB | 31.3 kB | ✓ |
Overall change | 31.3 kB | 31.3 kB | ✓ |
Client Pages
vercel/next.js canary | ctjlewis/next.js create-next-app-typescript | Change | |
---|---|---|---|
_app-HASH.js gzip | 1.28 kB | 1.28 kB | ✓ |
_error-HASH.js gzip | 3.72 kB | 3.72 kB | ✓ |
amp-HASH.js gzip | 536 B | 536 B | ✓ |
css-HASH.js gzip | 339 B | 339 B | ✓ |
hooks-HASH.js gzip | 887 B | 887 B | ✓ |
index-HASH.js gzip | 227 B | 227 B | ✓ |
link-HASH.js gzip | 1.64 kB | 1.64 kB | ✓ |
routerDirect..HASH.js gzip | 303 B | 303 B | ✓ |
withRouter-HASH.js gzip | 302 B | 302 B | ✓ |
21c68fa65a48..217.css gzip | 125 B | 125 B | ✓ |
Overall change | 9.37 kB | 9.37 kB | ✓ |
Client Build Manifests
vercel/next.js canary | ctjlewis/next.js create-next-app-typescript | Change | |
---|---|---|---|
_buildManifest.js gzip | 420 B | 420 B | ✓ |
Overall change | 420 B | 420 B | ✓ |
Rendered Page Sizes
vercel/next.js canary | ctjlewis/next.js create-next-app-typescript | Change | |
---|---|---|---|
index.html gzip | 613 B | 613 B | ✓ |
link.html gzip | 620 B | 620 B | ✓ |
withRouter.html gzip | 606 B | 606 B | ✓ |
Overall change | 1.84 kB | 1.84 kB | ✓ |
Co-authored-by: Tim Neutkens <timneutkens@me.com>
Since #24655 landed in 10.2.1, I wanted to update the documentation, especially for the top Google results for "next typescript", so that users know how to create a TS project. Please feel free to change anything you feel is appropriate.
) Since vercel#24655 landed in 10.2.1, I wanted to update the documentation, especially for the top Google results for "next typescript", so that users know how to create a TS project. Please feel free to change anything you feel is appropriate.
) Since vercel#24655 landed in 10.2.1, I wanted to update the documentation, especially for the top Google results for "next typescript", so that users know how to create a TS project. Please feel free to change anything you feel is appropriate.
Generate a Next project with TS via
create-next-app --typescript
. See: #24642create-app
,helpers/install
to add devDependencies support@types/react
,@types/next
,next
as default devDependencies -react
,react-dom
as default dependenciesTemplate files are either installed from
templates/{template}
, with files copied from eithertemplates/default/
ortemplates/typescript/
depending on whether or not the--typescript
flag is set.I did not set out to rewrite
helpers/install
so thoroughly, but after a significant number of smaller refactorings it ended up boiling down to a lot less code. Would appreciate reviews on all of that, and excuse my verbose comments (but I recommend leaving them in).Demo
Repo: https://github.com/ctjlewis/next-typescript
Deployed at: https://next-typescript-nmb4p1ydk-ctjlewis.vercel.app/