-
Notifications
You must be signed in to change notification settings - Fork 27k
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
react-hook-form example #21245
react-hook-form example #21245
Conversation
Stats from current PRDefault Server Mode (Decrease detected ✓)General
Page Load Tests Overall decrease
|
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 1.745 | 1.771 | |
/ avg req/sec | 1432.28 | 1411.95 | |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.061 | 1.081 | |
/error-in-render avg req/sec | 2355.52 | 2312.27 |
Client Bundles (main, webpack, commons)
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
677f882d2ed8..43e3.js gzip | 13.1 kB | 13.1 kB | ✓ |
framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
main-712e20f..aa05.js gzip | 6.63 kB | 6.63 kB | ✓ |
webpack-50be..df5b.js gzip | 751 B | 751 B | ✓ |
Overall change | 59.4 kB | 59.4 kB | ✓ |
Legacy Client Bundles (polyfills)
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
polyfills-af..9390.js gzip | 31.3 kB | 31.3 kB | ✓ |
Overall change | 31.3 kB | 31.3 kB | ✓ |
Client Pages
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
_app-2a09aa2..4a98.js gzip | 1.28 kB | 1.28 kB | ✓ |
_error-8b758..aef6.js gzip | 3.46 kB | 3.46 kB | ✓ |
hooks-c71ae4..70cd.js gzip | 887 B | 887 B | ✓ |
index-bbee2f..528b.js gzip | 227 B | 227 B | ✓ |
link-7faf09b..eba4.js gzip | 1.64 kB | 1.64 kB | ✓ |
routerDirect..bf84.js gzip | 303 B | 303 B | ✓ |
withRouter-a..5826.js gzip | 302 B | 302 B | ✓ |
Overall change | 8.09 kB | 8.09 kB | ✓ |
Client Build Manifests
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
_buildManifest.js gzip | 321 B | 321 B | ✓ |
Overall change | 321 B | 321 B | ✓ |
Rendered Page Sizes
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
index.html gzip | 615 B | 615 B | ✓ |
link.html gzip | 620 B | 620 B | ✓ |
withRouter.html gzip | 608 B | 608 B | ✓ |
Overall change | 1.84 kB | 1.84 kB | ✓ |
Serverless Mode
General
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
buildDuration | 10.6s | 10.1s | -542ms |
nodeModulesSize | 77.5 MB | 77.5 MB | ✓ |
Client Bundles (main, webpack, commons)
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
677f882d2ed8..43e3.js gzip | 13.1 kB | 13.1 kB | ✓ |
framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
main-712e20f..aa05.js gzip | 6.63 kB | 6.63 kB | ✓ |
webpack-50be..df5b.js gzip | 751 B | 751 B | ✓ |
Overall change | 59.4 kB | 59.4 kB | ✓ |
Legacy Client Bundles (polyfills)
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
polyfills-af..9390.js gzip | 31.3 kB | 31.3 kB | ✓ |
Overall change | 31.3 kB | 31.3 kB | ✓ |
Client Pages
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
_app-2a09aa2..4a98.js gzip | 1.28 kB | 1.28 kB | ✓ |
_error-8b758..aef6.js gzip | 3.46 kB | 3.46 kB | ✓ |
hooks-c71ae4..70cd.js gzip | 887 B | 887 B | ✓ |
index-bbee2f..528b.js gzip | 227 B | 227 B | ✓ |
link-7faf09b..eba4.js gzip | 1.64 kB | 1.64 kB | ✓ |
routerDirect..bf84.js gzip | 303 B | 303 B | ✓ |
withRouter-a..5826.js gzip | 302 B | 302 B | ✓ |
Overall change | 8.09 kB | 8.09 kB | ✓ |
Client Build Manifests
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
_buildManifest.js gzip | 321 B | 321 B | ✓ |
Overall change | 321 B | 321 B | ✓ |
Serverless bundles
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
_error.js | 1 MB | 1 MB | ✓ |
404.html | 2.67 kB | 2.67 kB | ✓ |
hooks.html | 1.92 kB | 1.92 kB | ✓ |
index.js | 1 MB | 1 MB | ✓ |
link.js | 1.06 MB | 1.06 MB | ✓ |
routerDirect.js | 1.05 MB | 1.05 MB | ✓ |
withRouter.js | 1.05 MB | 1.05 MB | ✓ |
Overall change | 5.18 MB | 5.18 MB | ✓ |
Stats from current PRDefault Server ModeGeneral
Page Load Tests Overall increase ✓
Client Bundles (main, webpack, commons)
Legacy Client Bundles (polyfills)
Client Pages
Client Build Manifests
Rendered Page Sizes
Serverless ModeGeneral
Client Bundles (main, webpack, commons)
Legacy Client Bundles (polyfills)
Client Pages
Client Build Manifests
Serverless bundles
Webpack 5 Mode (Decrease detected ✓)General
Page Load Tests Overall decrease
|
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 1.683 | 1.76 | |
/ avg req/sec | 1485.29 | 1420.26 | |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.101 | 1.096 | 0 |
/error-in-render avg req/sec | 2271.57 | 2282.04 | +10.47 |
Client Bundles (main, webpack, commons)
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
597-3bd7d6bd..868b.js gzip | 13 kB | 13 kB | ✓ |
framework.HASH.js gzip | 39.3 kB | 39.3 kB | ✓ |
main-HASH.js gzip | 6.58 kB | 6.58 kB | ✓ |
webpack-HASH.js gzip | 954 B | 954 B | ✓ |
Overall change | 59.8 kB | 59.8 kB | ✓ |
Legacy Client Bundles (polyfills)
vercel/next.js canary | aydinkn/next.js with-react-hook-form | 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 | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
_app-a5b2e84..33cf.js gzip | 1.26 kB | 1.26 kB | ✓ |
_error-6f1f9..5577.js gzip | 3.38 kB | 3.38 kB | ✓ |
hooks-725de8..0a15.js gzip | 904 B | 904 B | ✓ |
index-939503..6e1c.js gzip | 232 B | 232 B | ✓ |
link-e0cc871..fdbb.js gzip | 1.63 kB | 1.63 kB | ✓ |
routerDirect..9360.js gzip | 308 B | 308 B | ✓ |
withRouter-6..44ec.js gzip | 304 B | 304 B | ✓ |
Overall change | 8.02 kB | 8.02 kB | ✓ |
Client Build Manifests
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
_buildManifest.js gzip | 299 B | 299 B | ✓ |
Overall change | 299 B | 299 B | ✓ |
Rendered Page Sizes
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
index.html gzip | 587 B | 587 B | ✓ |
link.html gzip | 593 B | 593 B | ✓ |
withRouter.html gzip | 581 B | 581 B | ✓ |
Overall change | 1.76 kB | 1.76 kB | ✓ |
Diffs
Diff for index.html
@@ -43,7 +43,7 @@
"props": { "pageProps": {} },
"page": "/",
"query": {},
- "buildId": "mTLJArJ1Y_h6G0xw_Feqt",
+ "buildId": "FsMpkm6a1XinbLBN5f8A3",
"isFallback": false,
"gip": true
}
@@ -77,11 +77,11 @@
async=""
></script>
<script
- src="/_next/static/mTLJArJ1Y_h6G0xw_Feqt/_buildManifest.js"
+ src="/_next/static/FsMpkm6a1XinbLBN5f8A3/_buildManifest.js"
async=""
></script>
<script
- src="/_next/static/mTLJArJ1Y_h6G0xw_Feqt/_ssgManifest.js"
+ src="/_next/static/FsMpkm6a1XinbLBN5f8A3/_ssgManifest.js"
async=""
></script>
</body>
Diff for link.html
@@ -48,7 +48,7 @@
"props": { "pageProps": {} },
"page": "/link",
"query": {},
- "buildId": "mTLJArJ1Y_h6G0xw_Feqt",
+ "buildId": "FsMpkm6a1XinbLBN5f8A3",
"isFallback": false,
"gip": true
}
@@ -82,11 +82,11 @@
async=""
></script>
<script
- src="/_next/static/mTLJArJ1Y_h6G0xw_Feqt/_buildManifest.js"
+ src="/_next/static/FsMpkm6a1XinbLBN5f8A3/_buildManifest.js"
async=""
></script>
<script
- src="/_next/static/mTLJArJ1Y_h6G0xw_Feqt/_ssgManifest.js"
+ src="/_next/static/FsMpkm6a1XinbLBN5f8A3/_ssgManifest.js"
async=""
></script>
</body>
Diff for withRouter.html
@@ -43,7 +43,7 @@
"props": { "pageProps": {} },
"page": "/withRouter",
"query": {},
- "buildId": "mTLJArJ1Y_h6G0xw_Feqt",
+ "buildId": "FsMpkm6a1XinbLBN5f8A3",
"isFallback": false,
"gip": true
}
@@ -77,11 +77,11 @@
async=""
></script>
<script
- src="/_next/static/mTLJArJ1Y_h6G0xw_Feqt/_buildManifest.js"
+ src="/_next/static/FsMpkm6a1XinbLBN5f8A3/_buildManifest.js"
async=""
></script>
<script
- src="/_next/static/mTLJArJ1Y_h6G0xw_Feqt/_ssgManifest.js"
+ src="/_next/static/FsMpkm6a1XinbLBN5f8A3/_ssgManifest.js"
async=""
></script>
</body>
Stats from current PRDefault Server Mode (Increase detected
|
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
buildDuration | 8.8s | 9s | |
nodeModulesSize | 73.3 MB | 73.3 MB | ✓ |
Page Load Tests Overall increase ✓
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 1.755 | 1.718 | -0.04 |
/ avg req/sec | 1424.24 | 1455.48 | +31.24 |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.132 | 1.122 | -0.01 |
/error-in-render avg req/sec | 2208.06 | 2227.2 | +19.14 |
Client Bundles (main, webpack, commons)
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
677f882d2ed8..38ed.js gzip | 13.1 kB | 13.1 kB | ✓ |
framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
main-HASH.js gzip | 6.63 kB | 6.63 kB | ✓ |
webpack-HASH.js gzip | 751 B | 751 B | ✓ |
Overall change | 59.4 kB | 59.4 kB | ✓ |
Legacy Client Bundles (polyfills)
vercel/next.js canary | aydinkn/next.js with-react-hook-form | 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 | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
_app-2a09aa2..4a98.js gzip | 1.28 kB | 1.28 kB | ✓ |
_error-8b758..aef6.js gzip | 3.46 kB | 3.46 kB | ✓ |
hooks-c71ae4..70cd.js gzip | 887 B | 887 B | ✓ |
index-bbee2f..528b.js gzip | 227 B | 227 B | ✓ |
link-7faf09b..eba4.js gzip | 1.64 kB | 1.64 kB | ✓ |
routerDirect..bf84.js gzip | 303 B | 303 B | ✓ |
withRouter-a..5826.js gzip | 302 B | 302 B | ✓ |
Overall change | 8.09 kB | 8.09 kB | ✓ |
Client Build Manifests
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
_buildManifest.js gzip | 321 B | 321 B | ✓ |
Overall change | 321 B | 321 B | ✓ |
Rendered Page Sizes
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
index.html gzip | 614 B | 614 B | ✓ |
link.html gzip | 620 B | 620 B | ✓ |
withRouter.html gzip | 608 B | 608 B | ✓ |
Overall change | 1.84 kB | 1.84 kB | ✓ |
Serverless Mode
General
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
buildDuration | 10.2s | 10.9s | |
nodeModulesSize | 73.3 MB | 73.3 MB | ✓ |
Client Bundles (main, webpack, commons)
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
677f882d2ed8..38ed.js gzip | 13.1 kB | 13.1 kB | ✓ |
framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
main-HASH.js gzip | 6.63 kB | 6.63 kB | ✓ |
webpack-HASH.js gzip | 751 B | 751 B | ✓ |
Overall change | 59.4 kB | 59.4 kB | ✓ |
Legacy Client Bundles (polyfills)
vercel/next.js canary | aydinkn/next.js with-react-hook-form | 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 | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
_app-2a09aa2..4a98.js gzip | 1.28 kB | 1.28 kB | ✓ |
_error-8b758..aef6.js gzip | 3.46 kB | 3.46 kB | ✓ |
hooks-c71ae4..70cd.js gzip | 887 B | 887 B | ✓ |
index-bbee2f..528b.js gzip | 227 B | 227 B | ✓ |
link-7faf09b..eba4.js gzip | 1.64 kB | 1.64 kB | ✓ |
routerDirect..bf84.js gzip | 303 B | 303 B | ✓ |
withRouter-a..5826.js gzip | 302 B | 302 B | ✓ |
Overall change | 8.09 kB | 8.09 kB | ✓ |
Client Build Manifests
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
_buildManifest.js gzip | 321 B | 321 B | ✓ |
Overall change | 321 B | 321 B | ✓ |
Serverless bundles
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
_error.js | 1 MB | 1 MB | ✓ |
404.html | 2.67 kB | 2.67 kB | ✓ |
hooks.html | 1.92 kB | 1.92 kB | ✓ |
index.js | 1 MB | 1 MB | ✓ |
link.js | 1.06 MB | 1.06 MB | ✓ |
routerDirect.js | 1.05 MB | 1.05 MB | ✓ |
withRouter.js | 1.05 MB | 1.05 MB | ✓ |
Overall change | 5.19 MB | 5.19 MB | ✓ |
Webpack 5 Mode (Increase detected ⚠️ )
General
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
buildDuration | 10.8s | 10.3s | -444ms |
nodeModulesSize | 73.3 MB | 73.3 MB | ✓ |
Page Load Tests Overall increase ✓
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 1.819 | 1.765 | -0.05 |
/ avg req/sec | 1374.15 | 1416.21 | +42.06 |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.141 | 1.145 | 0 |
/error-in-render avg req/sec | 2190.93 | 2184.08 |
Client Bundles (main, webpack, commons)
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
597-c48889ef..1870.js gzip | 13 kB | 13 kB | ✓ |
framework.HASH.js gzip | 39.3 kB | 39.3 kB | ✓ |
main-HASH.js gzip | 6.58 kB | 6.58 kB | ✓ |
webpack-HASH.js gzip | 954 B | 954 B | ✓ |
Overall change | 59.8 kB | 59.8 kB | ✓ |
Legacy Client Bundles (polyfills)
vercel/next.js canary | aydinkn/next.js with-react-hook-form | 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 | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
_app-a5b2e84..33cf.js gzip | 1.26 kB | 1.26 kB | ✓ |
_error-6f1f9..5577.js gzip | 3.38 kB | 3.38 kB | ✓ |
hooks-725de8..0a15.js gzip | 904 B | 904 B | ✓ |
index-939503..6e1c.js gzip | 232 B | 232 B | ✓ |
link-e0cc871..fdbb.js gzip | 1.63 kB | 1.63 kB | ✓ |
routerDirect..9360.js gzip | 308 B | 308 B | ✓ |
withRouter-6..44ec.js gzip | 304 B | 304 B | ✓ |
Overall change | 8.02 kB | 8.02 kB | ✓ |
Client Build Manifests
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
_buildManifest.js gzip | 299 B | 299 B | ✓ |
Overall change | 299 B | 299 B | ✓ |
Rendered Page Sizes
vercel/next.js canary | aydinkn/next.js with-react-hook-form | Change | |
---|---|---|---|
index.html gzip | 588 B | 588 B | ✓ |
link.html gzip | 593 B | 593 B | ✓ |
withRouter.html gzip | 581 B | 581 B | ✓ |
Overall change | 1.76 kB | 1.76 kB | ✓ |
Diffs
Diff for index.html
@@ -43,7 +43,7 @@
"props": { "pageProps": {} },
"page": "/",
"query": {},
- "buildId": "GrcoB89wGe1YWd1hDcGjc",
+ "buildId": "KPJB2sOhuIQoW5VLOkZyq",
"isFallback": false,
"gip": true
}
@@ -77,11 +77,11 @@
async=""
></script>
<script
- src="/_next/static/GrcoB89wGe1YWd1hDcGjc/_buildManifest.js"
+ src="/_next/static/KPJB2sOhuIQoW5VLOkZyq/_buildManifest.js"
async=""
></script>
<script
- src="/_next/static/GrcoB89wGe1YWd1hDcGjc/_ssgManifest.js"
+ src="/_next/static/KPJB2sOhuIQoW5VLOkZyq/_ssgManifest.js"
async=""
></script>
</body>
Diff for link.html
@@ -48,7 +48,7 @@
"props": { "pageProps": {} },
"page": "/link",
"query": {},
- "buildId": "GrcoB89wGe1YWd1hDcGjc",
+ "buildId": "KPJB2sOhuIQoW5VLOkZyq",
"isFallback": false,
"gip": true
}
@@ -82,11 +82,11 @@
async=""
></script>
<script
- src="/_next/static/GrcoB89wGe1YWd1hDcGjc/_buildManifest.js"
+ src="/_next/static/KPJB2sOhuIQoW5VLOkZyq/_buildManifest.js"
async=""
></script>
<script
- src="/_next/static/GrcoB89wGe1YWd1hDcGjc/_ssgManifest.js"
+ src="/_next/static/KPJB2sOhuIQoW5VLOkZyq/_ssgManifest.js"
async=""
></script>
</body>
Diff for withRouter.html
@@ -43,7 +43,7 @@
"props": { "pageProps": {} },
"page": "/withRouter",
"query": {},
- "buildId": "GrcoB89wGe1YWd1hDcGjc",
+ "buildId": "KPJB2sOhuIQoW5VLOkZyq",
"isFallback": false,
"gip": true
}
@@ -77,11 +77,11 @@
async=""
></script>
<script
- src="/_next/static/GrcoB89wGe1YWd1hDcGjc/_buildManifest.js"
+ src="/_next/static/KPJB2sOhuIQoW5VLOkZyq/_buildManifest.js"
async=""
></script>
<script
- src="/_next/static/GrcoB89wGe1YWd1hDcGjc/_ssgManifest.js"
+ src="/_next/static/KPJB2sOhuIQoW5VLOkZyq/_ssgManifest.js"
async=""
></script>
</body>
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.
@aydinkn Hi there and thank you for the PR!
The example is currently too basic, let's add some styles and better interactions. E.g something should happen after I click the "login" button.
Maybe react-hook-form
already has a good example that we can port into Next.js?
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.
Updated the example to use the latest recommendations from the react-hook-form documentation. Looks fine to land now, thanks! 👍
Co-authored-by: Tim Neutkens <[email protected]>
Hello,
This PR has an example which is shows how to integrate react-hook-form in Next.js.