Improve initial setup with new App Router TypeScript project #64826

unstubbable · 2024-04-20T14:14:28Z

What?

Fixes a couple of issues in the latest Canary regarding the tsconfig.json adjustments that are done after creating a new App Router project with create-next-app. Specifically:

Set default TS target to ES2017 (continuation of Improve top level await coverage #64508).
Do not warn about disabled strict mode if strict mode was enabled. This is the case after starting the dev command for the first time after having created a new project with create-next-app, because in the tsconfig templates strict is enabled per default.
Fix wrongly printed tsconfig changes. See snapshot changes in dc87ebc for details of what was wrong. The bug was introduced in Improve top level await coverage #64508.

Why?

Avoid creating any changes to tsconfig.json in a fresh project on first run, and don't confuse the user with wrong logs.

How?

I fixed the issues in writeConfigurationDefaults(), and added unit tests, as well as adjusted the existing integration tests, to prevent regressions. Additionally, I've created a new project inside of the Next.js monorepo with pnpm create-next-app and ran the dev command inside of this project to verify my fixes.

ijjk · 2024-04-20T14:14:50Z

Allow CI Workflow Run

approve CI run for commit: 302646a

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

eps1lon

Looks good, thank you. CI just needs fixing (or probably just retrying).

ijjk · 2024-04-20T16:05:29Z

Tests Passed

ijjk · 2024-04-20T16:05:52Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	unstubbable/next.js improve-app-router-ts-setup	Change
buildDuration	18.2s	16.3s	N/A
buildDurationCached	10.3s	7.8s	N/A
nodeModulesSize	360 MB	360 MB	⚠️ +1.42 kB
nextStartRea..uration (ms)	442ms	439ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	unstubbable/next.js improve-app-router-ts-setup	Change
139-HASH.js gzip	31.8 kB	31.8 kB	N/A
2478adb3-HASH.js gzip	53.5 kB	53.5 kB	N/A
4967-HASH.js gzip	5.1 kB	5.1 kB	N/A
6701.HASH.js gzip	168 B	168 B	✓
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	228 B	226 B	N/A
main-HASH.js gzip	31.6 kB	31.6 kB	N/A
webpack-HASH.js gzip	1.65 kB	1.64 kB	N/A
Overall change	45.3 kB	45.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	unstubbable/next.js improve-app-router-ts-setup	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	unstubbable/next.js improve-app-router-ts-setup	Change
_app-HASH.js gzip	194 B	193 B	N/A
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	510 B	510 B	✓
css-HASH.js gzip	343 B	342 B	N/A
dynamic-HASH.js gzip	2.51 kB	2.52 kB	N/A
edge-ssr-HASH.js gzip	266 B	265 B	N/A
head-HASH.js gzip	365 B	362 B	N/A
hooks-HASH.js gzip	391 B	390 B	N/A
image-HASH.js gzip	4.32 kB	4.32 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.69 kB	2.69 kB	N/A
routerDirect..HASH.js gzip	328 B	328 B	✓
script-HASH.js gzip	393 B	395 B	N/A
withRouter-HASH.js gzip	323 B	323 B	✓
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	1.73 kB	1.73 kB	✓

Client Build Manifests

	vercel/next.js canary	unstubbable/next.js improve-app-router-ts-setup	Change
_buildManifest.js gzip	484 B	484 B	✓
Overall change	484 B	484 B	✓

Rendered Page Sizes

	vercel/next.js canary	unstubbable/next.js improve-app-router-ts-setup	Change
index.html gzip	528 B	528 B	✓
link.html gzip	540 B	541 B	N/A
withRouter.html gzip	523 B	523 B	✓
Overall change	1.05 kB	1.05 kB	✓

Edge SSR bundle Size

	vercel/next.js canary	unstubbable/next.js improve-app-router-ts-setup	Change
edge-ssr.js gzip	108 kB	108 kB	N/A
page.js gzip	3.04 kB	3.05 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	unstubbable/next.js improve-app-router-ts-setup	Change
middleware-b..fest.js gzip	623 B	623 B	✓
middleware-r..fest.js gzip	155 B	154 B	N/A
middleware.js gzip	27.9 kB	27.9 kB	N/A
edge-runtime..pack.js gzip	839 B	839 B	✓
Overall change	1.46 kB	1.46 kB	✓

Next Runtimes

	vercel/next.js canary	unstubbable/next.js improve-app-router-ts-setup	Change
app-page-exp...dev.js gzip	171 kB	171 kB	✓
app-page-exp..prod.js gzip	98.4 kB	98.4 kB	✓
app-page-tur..prod.js gzip	99.9 kB	99.9 kB	✓
app-page-tur..prod.js gzip	94.2 kB	94.2 kB	✓
app-page.run...dev.js gzip	157 kB	157 kB	✓
app-page.run..prod.js gzip	93 kB	93 kB	✓
app-route-ex...dev.js gzip	21.4 kB	21.4 kB	✓
app-route-ex..prod.js gzip	15.2 kB	15.2 kB	✓
app-route-tu..prod.js gzip	15.2 kB	15.2 kB	✓
app-route-tu..prod.js gzip	14.9 kB	14.9 kB	✓
app-route.ru...dev.js gzip	21.3 kB	21.3 kB	✓
app-route.ru..prod.js gzip	14.9 kB	14.9 kB	✓
pages-api-tu..prod.js gzip	9.55 kB	9.55 kB	✓
pages-api.ru...dev.js gzip	9.82 kB	9.82 kB	✓
pages-api.ru..prod.js gzip	9.55 kB	9.55 kB	✓
pages-turbo...prod.js gzip	21.4 kB	21.4 kB	✓
pages.runtim...dev.js gzip	22.1 kB	22.1 kB	✓
pages.runtim..prod.js gzip	21.4 kB	21.4 kB	✓
server.runti..prod.js gzip	65.3 kB	65.3 kB	✓
Overall change	975 kB	975 kB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	unstubbable/next.js improve-app-router-ts-setup	Change
0.pack gzip	1.61 MB	1.61 MB	⚠️ +158 B
index.pack gzip	112 kB	112 kB	N/A
Overall change	1.61 MB	1.61 MB	⚠️ +158 B

Diff details

Diff for main-HASH.js

Diff too large to display

Commit: a4e8c97

ryan-nauman · 2024-04-22T17:27:31Z

fyi this slightly relates to #61413 as well

eps1lon · 2024-04-23T11:47:57Z

fyi this slightly relates to #61413 as well

@ryan-nauman How are these related?

ryan-nauman · 2024-04-23T11:54:51Z

@eps1lon both add tests for writeConfigurationDefaults.ts

the location in this PR is packages/next/src/lib/typescript/writeConfigurationDefaults.test.ts
the location in that PR is test/unit/write-configuration-defaults.test.ts

it could be confusing to have them in both places

unstubbable · 2024-04-23T12:33:37Z

@eps1lon both have tests for writeConfigurationDefaults.ts

the location in this PR is packages/next/src/lib/typescript/writeConfigurationDefaults.test.ts

the location in that PR is test/unit/write-configuration-defaults.test.ts

it could be confusing to have them in both places

Yeah, I need to merge those now, after rebasing. I'm not sure about the history of test/unit, but it seems that nowadays unit tests are often colocated with their implementation. The unit test in test/unit is also importing its implementation from next/dist, and I don't see a moduleNameMapper, so does this require a build when the implementation is changed? (Can't test it myself right now, but might be able to do so this evening, CET.)

ryan-nauman · 2024-04-23T12:39:57Z

so does this require a build when the implementation is changed?

yes. same as test/unit/write-app-declarations.test.ts

i followed the guide in https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md. i have one console with pnpm dev running. as i make changes to the implementation i run pnpm testonly-dev .../pnpm testonly-start ...

unstubbable · 2024-04-26T08:28:31Z

@eps1lon I've now merged the two unit test files for writeConfigurationDefaults, and also added integration test expectations to ensure that there are no git changes in a newly created project with TS.

stale

unstubbable · 2024-04-26T10:12:04Z

Could you also update all the test fixtures with a tsconfig? Otherwise running tests in those adds unrelated changes in git.

@eps1lon Do you mean "running tests" as in pnpm next dev test/e2e/app-dir/modularizeimports, for example? So I should update all tsconfigs in examples and in test?

eps1lon · 2024-04-26T11:23:55Z

So I should update all tsconfigs in examples and in test?

At least test, yes. Sometimes we run the Next cli directly on those packages which would now change the tsconfig.

unstubbable · 2024-04-26T12:39:29Z

So I should update all tsconfigs in examples and in test?

At least test, yes. Sometimes we run the Next cli directly on those packages which would now change the tsconfig.

Alright, done.

Just to make sure we're having the same understanding regarding the statement "which would now change the tsconfig":
This PR does not change anything about that. Potentially changing the tsconfig when running next dev or next lint, is already happening on canary. That this currently happens for newly created projects was caused by #64508.

.github/workflows/build_reusable.yml

Continuation of vercel#64508 This avoids needing to update a freshly created tsconfig.json when first running the `dev` command.

This is the case after starting the `dev` command for the first time, after having created a new project with `create-next-app`.

This should avoid getting unrelated git changes when running `next dev` in any of these projects. Commands used to update the files: ```sh find test -name tsconfig.json -exec dirname {} \; | while read dir; do pnpm next lint "$dir"; done pnpm format ```

eps1lon

I'll babysit CI to get this in. Great work, thank you!

unstubbable requested review from a team, timneutkens, ijjk, shuding, huozhi, feedthejim, ztanner and wyattjoh as code owners April 20, 2024 14:14

ijjk added create-next-app Related to our CLI tool for quickly starting a new Next.js application. type: next labels Apr 20, 2024

eps1lon added the CI approved Approve running CI for fork label Apr 20, 2024

eps1lon previously approved these changes Apr 20, 2024

View reviewed changes

unstubbable force-pushed the improve-app-router-ts-setup branch from 302646a to da33856 Compare April 20, 2024 15:56

unstubbable force-pushed the improve-app-router-ts-setup branch 3 times, most recently from e7e0a1f to 2f6421c Compare April 22, 2024 13:05

unstubbable force-pushed the improve-app-router-ts-setup branch from 2f6421c to 7d88627 Compare April 26, 2024 08:25

ijjk added the tests label Apr 26, 2024

unstubbable force-pushed the improve-app-router-ts-setup branch from 999feae to c19acba Compare April 26, 2024 09:25

unstubbable requested a review from a team as a code owner April 26, 2024 09:49

unstubbable removed the request for review from a team April 26, 2024 09:49

unstubbable marked this pull request as draft April 26, 2024 09:55

unstubbable force-pushed the improve-app-router-ts-setup branch from e3a6619 to 4964b72 Compare April 26, 2024 10:14

ijjk added the examples Issue/PR related to examples label Apr 26, 2024

unstubbable force-pushed the improve-app-router-ts-setup branch from 53f0dc2 to 8ce9c0b Compare April 26, 2024 10:44

unstubbable force-pushed the improve-app-router-ts-setup branch from 8ce9c0b to 5d9f86e Compare April 26, 2024 12:32

unstubbable marked this pull request as ready for review April 26, 2024 12:47

unstubbable requested a review from styfle as a code owner April 26, 2024 12:47

unstubbable requested a review from eps1lon April 26, 2024 12:47

eps1lon reviewed Apr 26, 2024

View reviewed changes

.github/workflows/build_reusable.yml Outdated Show resolved Hide resolved

unstubbable force-pushed the improve-app-router-ts-setup branch from 5d9f86e to a6e09b6 Compare April 26, 2024 14:06

unstubbable added 9 commits April 26, 2024 16:40

Add test for writeConfigurationDefaults (with wrong snapshots)

aea3cff

Fix wrongly printed tsconfig changes

2f333f0

CNA: Set default TS target to ES2017

c9cc229

Continuation of vercel#64508 This avoids needing to update a freshly created tsconfig.json when first running the `dev` command.

Do not warn about disabled strict mode if strict mode was enabled

53bc8d1

This is the case after starting the `dev` command for the first time, after having created a new project with `create-next-app`.

Merge the two unit test files for writeConfigurationDefaults

c703417

Adjust CNA integration tests to expect no project git changes

5666686

Set CI git user for CNA

727a231

Clarify reason for configuring a CI git user

a4e8c97

unstubbable force-pushed the improve-app-router-ts-setup branch from a6e09b6 to a4e8c97 Compare April 26, 2024 14:40

unstubbable requested a review from eps1lon April 26, 2024 14:56

eps1lon approved these changes Apr 26, 2024

View reviewed changes

eps1lon merged commit 3438b39 into vercel:canary Apr 26, 2024
74 checks passed

unstubbable deleted the improve-app-router-ts-setup branch April 26, 2024 16:24

github-actions bot added the locked label May 11, 2024

github-actions bot locked as resolved and limited conversation to collaborators May 11, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve initial setup with new App Router TypeScript project #64826

Improve initial setup with new App Router TypeScript project #64826

unstubbable commented Apr 20, 2024 •

edited

ijjk commented Apr 20, 2024 •

edited by eps1lon

eps1lon left a comment

ijjk commented Apr 20, 2024 •

edited

ijjk commented Apr 20, 2024 •

edited

ryan-nauman commented Apr 22, 2024

eps1lon commented Apr 23, 2024

ryan-nauman commented Apr 23, 2024 •

edited

unstubbable commented Apr 23, 2024 •

edited

ryan-nauman commented Apr 23, 2024

unstubbable commented Apr 26, 2024 •

edited

unstubbable commented Apr 26, 2024 •

edited

eps1lon commented Apr 26, 2024

unstubbable commented Apr 26, 2024

eps1lon left a comment

Improve initial setup with new App Router TypeScript project #64826

Improve initial setup with new App Router TypeScript project #64826

Conversation

unstubbable commented Apr 20, 2024 • edited

What?

Why?

How?

ijjk commented Apr 20, 2024 • edited by eps1lon

eps1lon left a comment

Choose a reason for hiding this comment

ijjk commented Apr 20, 2024 • edited

Tests Passed

ijjk commented Apr 20, 2024 • edited

Stats from current PR

ryan-nauman commented Apr 22, 2024

eps1lon commented Apr 23, 2024

ryan-nauman commented Apr 23, 2024 • edited

unstubbable commented Apr 23, 2024 • edited

ryan-nauman commented Apr 23, 2024

unstubbable commented Apr 26, 2024 • edited

unstubbable commented Apr 26, 2024 • edited

eps1lon commented Apr 26, 2024

unstubbable commented Apr 26, 2024

eps1lon left a comment

Choose a reason for hiding this comment

unstubbable commented Apr 20, 2024 •

edited

ijjk commented Apr 20, 2024 •

edited by eps1lon

ijjk commented Apr 20, 2024 •

edited

ijjk commented Apr 20, 2024 •

edited

ryan-nauman commented Apr 23, 2024 •

edited

unstubbable commented Apr 23, 2024 •

edited

unstubbable commented Apr 26, 2024 •

edited

unstubbable commented Apr 26, 2024 •

edited