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

feat(create-next-app): add --ts, --typescript support #24655

Merged
merged 27 commits into from
May 7, 2021

Conversation

ctjlewis
Copy link
Contributor

@ctjlewis ctjlewis commented Apr 30, 2021

Generate a Next project with TS via create-next-app --typescript. See: #24642

  • Refactored create-app, helpers/install to add devDependencies support
  • Added @types/react, @types/next, next as default devDependencies - react, react-dom as default dependencies

Template files are either installed from templates/{template}, with files copied from either templates/default/ or templates/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/

--typescript next-typescript
Creating a new Next.js app in /home/christian/PersonalProjects/next-typescript.

Using yarn.

Installing dependencies:
- react
- react-dom

yarn add v1.22.5
warning ../../package.json: No license field
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 4 new dependencies.
info Direct dependencies
├─ react-dom@17.0.2
└─ react@17.0.2
info All dependencies
├─ js-tokens@4.0.0
├─ react-dom@17.0.2
├─ react@17.0.2
└─ scheduler@0.20.2
Done in 3.81s.

Installing devDependencies:
- next
- typescript
- @types/react
- @types/next

yarn add v1.22.5
warning ../../package.json: No license field
[1/4] Resolving packages...
warning @types/next@9.0.0: This is a stub types definition. next provides its own type definitions, so you do not need this installed.
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 200 new dependencies.
info Direct dependencies
├─ @types/next@9.0.0
├─ @types/react@17.0.4
├─ next@10.2.0
└─ typescript@4.2.4
info All dependencies
├─ @babel/code-frame@7.12.11
├─ @babel/helper-validator-identifier@7.14.0
├─ @babel/highlight@7.14.0
├─ @babel/runtime@7.12.5
├─ @babel/types@7.8.3
├─ @hapi/accept@5.0.1
├─ @hapi/boom@9.1.2
├─ @next/env@10.2.0
├─ @next/polyfill-module@10.2.0
├─ @next/react-dev-overlay@10.2.0
├─ @next/react-refresh-utils@10.2.0
├─ @opentelemetry/api@0.14.0
├─ @opentelemetry/context-base@0.14.0
├─ @types/next@9.0.0
├─ @types/node@15.0.1
├─ @types/prop-types@15.7.3
├─ @types/react@17.0.4
├─ @types/scheduler@0.16.1
├─ anser@1.4.9
├─ ansi-regex@5.0.0
├─ ansi-styles@3.2.1
├─ anymatch@3.1.2
├─ array-filter@1.0.0
├─ asn1.js@5.4.1
├─ assert@2.0.0
├─ ast-types@0.13.2
├─ babel-plugin-syntax-jsx@6.18.0
├─ big.js@5.2.2
├─ binary-extensions@2.2.0
├─ braces@3.0.2
├─ brorand@1.1.0
├─ browserify-aes@1.2.0
├─ browserify-cipher@1.0.1
├─ browserify-des@1.0.2
├─ browserify-rsa@4.1.0
├─ browserify-sign@4.2.1
├─ browserify-zlib@0.2.0
├─ browserslist@4.16.1
├─ buffer-xor@1.0.3
├─ buffer@5.6.0
├─ bytes@3.1.0
├─ caniuse-lite@1.0.30001220
├─ chalk@2.4.2
├─ chokidar@3.5.1
├─ classnames@2.2.6
├─ color-convert@1.9.3
├─ color-name@1.1.3
├─ colorette@1.2.2
├─ commondir@1.0.1
├─ console-browserify@1.2.0
├─ constants-browserify@1.0.0
├─ convert-source-map@1.7.0
├─ core-util-is@1.0.2
├─ create-ecdh@4.0.4
├─ create-hmac@1.1.7
├─ crypto-browserify@3.12.0
├─ css.escape@1.5.1
├─ cssnano-preset-simple@2.0.0
├─ cssnano-simple@2.0.0
├─ csstype@3.0.8
├─ data-uri-to-buffer@3.0.1
├─ debug@2.6.9
├─ depd@1.1.2
├─ des.js@1.0.1
├─ diffie-hellman@5.0.3
├─ domain-browser@4.19.0
├─ electron-to-chromium@1.3.725
├─ emojis-list@2.1.0
├─ encoding@0.1.13
├─ es-abstract@1.18.0
├─ es-to-primitive@1.2.1
├─ es6-object-assign@1.1.0
├─ escalade@3.1.1
├─ escape-string-regexp@1.0.5
├─ esutils@2.0.3
├─ etag@1.8.1
├─ events@3.3.0
├─ fill-range@7.0.1
├─ find-cache-dir@3.3.1
├─ find-up@4.1.0
├─ get-intrinsic@1.1.1
├─ get-orientation@1.1.2
├─ glob-parent@5.1.2
├─ glob-to-regexp@0.4.1
├─ graceful-fs@4.2.6
├─ has-bigints@1.0.1
├─ hash.js@1.1.7
├─ he@1.2.0
├─ hmac-drbg@1.0.1
├─ http-errors@1.7.3
├─ https-browserify@1.0.0
├─ iconv-lite@0.4.24
├─ is-arguments@1.1.0
├─ is-bigint@1.0.1
├─ is-binary-path@2.1.0
├─ is-boolean-object@1.1.0
├─ is-callable@1.2.3
├─ is-date-object@1.0.2
├─ is-extglob@2.1.1
├─ is-generator-function@1.0.8
├─ is-glob@4.0.1
├─ is-nan@1.3.2
├─ is-negative-zero@2.0.1
├─ is-number-object@1.0.4
├─ is-number@7.0.0
├─ is-regex@1.1.2
├─ is-symbol@1.0.3
├─ isarray@1.0.0
├─ jest-worker@27.0.0-next.5
├─ json5@1.0.1
├─ loader-utils@1.2.3
├─ locate-path@5.0.0
├─ lodash.sortby@4.7.0
├─ lodash@4.17.21
├─ make-dir@3.1.0
├─ merge-stream@2.0.0
├─ miller-rabin@4.0.1
├─ minimist@1.2.5
├─ ms@2.0.0
├─ nanoid@3.1.22
├─ native-url@0.3.4
├─ next@10.2.0
├─ node-fetch@2.6.1
├─ node-html-parser@1.4.9
├─ node-libs-browser@2.2.1
├─ node-releases@1.1.71
├─ normalize-path@3.0.0
├─ object-inspect@1.10.2
├─ object-is@1.1.5
├─ object.assign@4.1.2
├─ os-browserify@0.3.0
├─ p-limit@3.1.0
├─ p-locate@4.1.0
├─ p-try@2.2.0
├─ pako@1.0.11
├─ parse-asn1@5.1.6
├─ path-browserify@1.0.1
├─ path-exists@4.0.0
├─ picomatch@2.2.3
├─ pkg-dir@4.2.0
├─ platform@1.3.6
├─ pnp-webpack-plugin@1.6.4
├─ postcss@8.2.13
├─ process-nextick-args@2.0.1
├─ process@0.11.10
├─ prop-types@15.7.2
├─ public-encrypt@4.0.3
├─ punycode@1.4.1
├─ querystring-es3@0.2.1
├─ querystring@0.2.1
├─ randomfill@1.0.4
├─ raw-body@2.4.1
├─ react-is@16.13.1
├─ react-refresh@0.8.3
├─ readdirp@3.5.0
├─ regenerator-runtime@0.13.7
├─ safer-buffer@2.1.2
├─ semver@6.3.0
├─ setimmediate@1.0.5
├─ setprototypeof@1.1.1
├─ shell-quote@1.7.2
├─ source-map@0.7.3
├─ stacktrace-parser@0.1.10
├─ statuses@1.5.0
├─ stream-browserify@3.0.0
├─ stream-http@3.1.1
├─ stream-parser@0.3.1
├─ string_decoder@1.3.0
├─ string-hash@1.1.3
├─ string.prototype.trimend@1.0.4
├─ string.prototype.trimstart@1.0.4
├─ strip-ansi@6.0.0
├─ styled-jsx@3.3.2
├─ stylis-rule-sheet@0.0.10
├─ stylis@3.5.4
├─ supports-color@5.5.0
├─ timers-browserify@2.0.12
├─ to-arraybuffer@1.0.1
├─ to-fast-properties@2.0.0
├─ to-regex-range@5.0.1
├─ toidentifier@1.0.0
├─ tr46@1.0.1
├─ ts-pnp@1.2.0
├─ tty-browserify@0.0.1
├─ type-fest@0.7.1
├─ typescript@4.2.4
├─ unbox-primitive@1.0.1
├─ unpipe@1.0.0
├─ url@0.11.0
├─ use-subscription@1.5.1
├─ util-deprecate@1.0.2
├─ util@0.12.3
├─ vm-browserify@1.1.2
├─ watchpack@2.1.1
├─ webidl-conversions@4.0.2
├─ whatwg-url@7.1.0
├─ which-boxed-primitive@1.0.2
├─ which-typed-array@1.1.4
├─ xtend@4.0.2
└─ yocto-queue@0.1.0
Done in 46.11s.

Initialized a git repository.

Success! Created next-typescript at /home/christian/PersonalProjects/next-typescript
Inside that directory, you can run several commands:

  yarn dev
    Starts the development server.

  yarn build
    Builds the app for production.

  yarn start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd next-typescript
  yarn dev

@ijjk ijjk added the create-next-app Related to our CLI tool for quickly starting a new Next.js application. label Apr 30, 2021
@ctjlewis ctjlewis changed the title feat: add -t, --typescript option for create-next-app feat: add --ts, --typescript option for create-next-app May 1, 2021
@ctjlewis ctjlewis changed the title feat: add --ts, --typescript option for create-next-app feat(create-next-app): add --ts, --typescript support May 2, 2021
@timneutkens
Copy link
Member

Could I please get just some initial comments/feedback on this?

I submitted an issue about a TS flag, it was closed within 5 minutes and sent to discussions without any further comment by @timneutkens. I implement the feature within an hour and submit it, it goes nearly a week without initial feedback.

I understand this will take weeks to actually review, but some initial feedback would be nice. Does NextJS actually accept open source contributions, or would I be better off just closing my PRs?

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:

Screen Shot 2021-05-06 at 11 45 35

Specifically this message:

Screen Shot 2021-05-06 at 11 47 02

@ctjlewis
Copy link
Contributor Author

ctjlewis commented May 6, 2021

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 next deps/devDeps conflict.

timneutkens
timneutkens previously approved these changes May 6, 2021
Copy link
Member

@timneutkens timneutkens left a 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 👍

Copy link
Contributor Author

@ctjlewis ctjlewis left a 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.

packages/create-next-app/helpers/install.ts Outdated Show resolved Hide resolved
@ctjlewis
Copy link
Contributor Author

ctjlewis commented May 6, 2021

Thanks Tim. Good work!

@ijjk

This comment has been minimized.

@ijjk
Copy link
Member

ijjk commented May 6, 2021

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General
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 ⚠️ +227ms
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 ⚠️ +254ms
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 ⚠️ +0.05
/ avg req/sec 1251.68 1221.16 ⚠️ -30.52
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.046 1.096 ⚠️ +0.05
/error-in-render avg req/sec 2390.61 2280 ⚠️ -110.61
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
Commit: 1371c4d

@timneutkens timneutkens merged commit 9c77cda into vercel:canary May 7, 2021
flybayer pushed a commit to blitz-js/next.js that referenced this pull request Jun 1, 2021
Co-authored-by: Tim Neutkens <timneutkens@me.com>
kodiakhq bot pushed a commit that referenced this pull request Jun 11, 2021
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.
janicklas-ralph pushed a commit to janicklas-ralph/next.js that referenced this pull request Jun 11, 2021
)

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.
flybayer pushed a commit to blitz-js/next.js that referenced this pull request Jun 16, 2021
)

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.
@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
create-next-app Related to our CLI tool for quickly starting a new Next.js application.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants