NextJS Static demo refresh
This commit is contained in:
parent
67294eeeae
commit
a5e01f9476
@ -53,8 +53,26 @@ Typically, some users will create a spreadsheet with source data that should be
|
||||
loaded into the site. This sheet will have known columns. For example, "Name"
|
||||
and "Index" are used in [`pres.xlsx`](https://docs.sheetjs.com/pres.xlsx):
|
||||
|
||||
<table>
|
||||
<thead><tr><th>Spreadsheet</th><th>State</th></tr></thead>
|
||||
<tbody><tr><td>
|
||||
|
||||
|
||||
|
||||
</td><td>
|
||||
|
||||
```js
|
||||
[
|
||||
{ Name: "Bill Clinton", Index: 42 },
|
||||
{ Name: "GeorgeW Bush", Index: 43 },
|
||||
{ Name: "Barack Obama", Index: 44 },
|
||||
{ Name: "Donald Trump", Index: 45 },
|
||||
{ Name: "Joseph Biden", Index: 46 }
|
||||
]
|
||||
```
|
||||
|
||||
</td></tr></tbody></table>
|
||||
|
||||
This naturally maps to an array of typed objects, as in the TS example below:
|
||||
|
||||
```ts
|
||||
@ -71,18 +89,6 @@ const data = utils.sheet_to_json<President>(wb.Sheets[wb.SheetNames[0]]);
|
||||
console.log(data);
|
||||
```
|
||||
|
||||
`data` will be an array of objects:
|
||||
|
||||
```js
|
||||
[
|
||||
{ Name: "Bill Clinton", Index: 42 },
|
||||
{ Name: "GeorgeW Bush", Index: 43 },
|
||||
{ Name: "Barack Obama", Index: 44 },
|
||||
{ Name: "Donald Trump", Index: 45 },
|
||||
{ Name: "Joseph Biden", Index: 46 }
|
||||
]
|
||||
```
|
||||
|
||||
A component will typically map over the data. The following example generates
|
||||
a TABLE with a row for each President:
|
||||
|
||||
@ -135,9 +141,9 @@ function exportFile() {
|
||||
|
||||
This demo was tested in the following environments:
|
||||
|
||||
| Svelte | ViteJS | Date |
|
||||
|:--------|:--------|:-----------|
|
||||
| `4.2.8` | `5.0.5` | 2023-12-04 |
|
||||
| SvelteJS | ViteJS | Date |
|
||||
|:---------|:---------|:-----------|
|
||||
| `4.2.18` | `5.2.13` | 2024-06-07 |
|
||||
|
||||
:::
|
||||
|
||||
@ -235,9 +241,9 @@ function exportFile() {
|
||||
|
||||
This demo was tested in the following environments:
|
||||
|
||||
| Svelte | ViteJS | Date |
|
||||
|:--------|:--------|:-----------|
|
||||
| `4.2.8` | `5.0.5` | 2023-12-04 |
|
||||
| SvelteJS | ViteJS | Date |
|
||||
|:---------|:---------|:-----------|
|
||||
| `4.2.18` | `5.2.13` | 2024-06-07 |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
@ -47,8 +47,19 @@ This demo was tested in the following environments:
|
||||
|
||||
| ESBuild | Date |
|
||||
|:----------|:-----------|
|
||||
| `0.14.14` | 2023-12-04 |
|
||||
| `0.19.8` | 2023-12-04 |
|
||||
| `0.21.4` | 2024-06-07 |
|
||||
| `0.20.2` | 2024-06-07 |
|
||||
| `0.19.12` | 2024-06-07 |
|
||||
| `0.18.20` | 2024-06-07 |
|
||||
| `0.17.19` | 2024-06-07 |
|
||||
| `0.16.17` | 2024-06-07 |
|
||||
| `0.15.18` | 2024-06-07 |
|
||||
| `0.14.54` | 2024-06-07 |
|
||||
| `0.13.15` | 2024-06-07 |
|
||||
| `0.12.29` | 2024-06-07 |
|
||||
| `0.11.23` | 2024-06-07 |
|
||||
| `0.10.2` | 2024-06-07 |
|
||||
| `0.9.7` | 2024-06-07 |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
@ -36,13 +36,13 @@ time and how to read files on the server in NextJS lifecycle methods.
|
||||
NextJS collects telemetry by default. The `telemetry` subcommand can disable it:
|
||||
|
||||
```js
|
||||
npx next@13.5.6 telemetry disable
|
||||
npx -y next@13.5.6 telemetry disable
|
||||
```
|
||||
|
||||
The setting can be verified by running
|
||||
|
||||
```js
|
||||
npx next@13.5.6 telemetry status
|
||||
npx -y next@13.5.6 telemetry status
|
||||
```
|
||||
|
||||
:::
|
||||
@ -75,12 +75,26 @@ This demo was tested in the following environments:
|
||||
|
||||
| NextJS | NodeJS | Date |
|
||||
|:----------|:----------|:-----------|
|
||||
| ` 9.5.5` | `16.20.2` | 2023-12-04 |
|
||||
| `10.2.3` | `16.20.2` | 2023-12-04 |
|
||||
| `11.1.4` | `16.20.2` | 2023-12-04 |
|
||||
| `12.3.4` | `20.10.0` | 2023-12-04 |
|
||||
| `13.5.6` | `20.10.0` | 2023-12-04 |
|
||||
| `14.0.3` | `20.10.0` | 2023-12-04 |
|
||||
| ` 9.5.5` | `16.20.2` | 2024-06-07 |
|
||||
| `10.2.3` | `16.20.2` | 2024-06-07 |
|
||||
| `11.1.4` | `16.20.2` | 2024-06-07 |
|
||||
| `12.3.4` | `20.14.0` | 2024-06-07 |
|
||||
| `13.5.6` | `20.14.0` | 2024-06-07 |
|
||||
| `14.2.3` | `20.14.0` | 2024-06-07 |
|
||||
|
||||
:::
|
||||
|
||||
:::info pass
|
||||
|
||||
SheetJS libraries work in legacy NextJS apps. Older versions of this demo have
|
||||
been tested against versions `3.2.3`, `4.2.3`, `5.1.0`, `6.1.2` and `7.0.3`.
|
||||
|
||||
NextJS has made a number of breaking changes over the years. Older versions of
|
||||
NextJS use legacy versions of ReactJS that do not support function components
|
||||
and other idioms.
|
||||
|
||||
[`examples/reactjs-legacy`](https://git.sheetjs.com/examples/reactjs-legacy) on
|
||||
the SheetJS git server includes code samples for legacy NextJS versions.
|
||||
|
||||
:::
|
||||
|
||||
@ -554,13 +568,13 @@ When upgrading NextJS is not an option, NodeJS should be downgraded to v16.
|
||||
0) Disable NextJS telemetry:
|
||||
|
||||
```js
|
||||
npx next@13.5.6 telemetry disable
|
||||
npx -y next@13.5.6 telemetry disable
|
||||
```
|
||||
|
||||
Confirm it is disabled by running
|
||||
|
||||
```js
|
||||
npx next@13.5.6 telemetry status
|
||||
npx -y next@13.5.6 telemetry status
|
||||
```
|
||||
|
||||
1) Set up folder structure. At the end, a `pages` folder with a `sheets`
|
||||
@ -583,7 +597,7 @@ curl -LO https://docs.sheetjs.com/next/sheetjs.xlsx
|
||||
|
||||
:::note pass
|
||||
|
||||
The `next@13.5.6` dependency can be adjusted to pick a different version. For
|
||||
The `next@13.5.6` depefndency can be adjusted to pick a different version. For
|
||||
example, NextJS `12.3.4` is installed with
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
@ -699,6 +713,13 @@ As explained in the summary, the `/getStaticPaths` and `/getStaticProps` routes
|
||||
are completely static. 2 `/sheets/#` pages were generated, corresponding to 2
|
||||
worksheets in the file. `/getServerSideProps` is server-rendered.
|
||||
|
||||
:::info pass
|
||||
|
||||
NextJS historically used lowercase Lambda (`λ`) to denote dynamic paths. This
|
||||
was changed to a stylized lowercase F (`ƒ`) in recent versions of NextJS.
|
||||
|
||||
:::
|
||||
|
||||
9) Try to build a static site:
|
||||
|
||||
<Tabs groupId="nextver">
|
||||
@ -741,7 +762,13 @@ This build will fail. A static page cannot be generated at this point because
|
||||
|
||||
### Static Site
|
||||
|
||||
10) Delete `pages/getServerSideProps.js` and rebuild:
|
||||
10) Delete `pages/getServerSideProps.js`:
|
||||
|
||||
```bash
|
||||
rm -f pages/getServerSideProps.js
|
||||
```
|
||||
|
||||
11) Rebuild the static site:
|
||||
|
||||
<Tabs groupId="nextver">
|
||||
<TabItem value="13" label="NextJS 9 - 13">
|
||||
@ -758,17 +785,16 @@ module.exports = {
|
||||
webpack: (config) => {
|
||||
```
|
||||
|
||||
After editing `next.config.js`:
|
||||
After editing `next.config.js`, run the build command:
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
```bash
|
||||
rm -f pages/getServerSideProps.js
|
||||
npx next build
|
||||
```
|
||||
|
||||
Inspecting the output, there should be no lines with the `λ` symbol:
|
||||
Inspecting the output, there should be no lines with `λ` or `ƒ`:
|
||||
|
||||
```
|
||||
Route (pages) Size First Load JS
|
||||
@ -782,7 +808,7 @@ Route (pages) Size First Load JS
|
||||
└ /sheets/1
|
||||
```
|
||||
|
||||
11) Generate the static site:
|
||||
12) Generate the static site:
|
||||
|
||||
<Tabs groupId="nextver">
|
||||
<TabItem value="13" label="NextJS 9 - 13">
|
||||
@ -814,7 +840,7 @@ npx next build
|
||||
|
||||
The static site will be written to the `out` subfolder
|
||||
|
||||
12) Serve the static site:
|
||||
13) Serve the static site:
|
||||
|
||||
```bash
|
||||
npx http-server out
|
||||
@ -825,16 +851,16 @@ testing the generated site. Note that `/getServerSideProps` will 404 since the
|
||||
page was removed.
|
||||
|
||||
[^1]: See the ["Webpack" asset module demo](/docs/demos/static/webpack) for more details.
|
||||
[^2]: See [`read` in "Reading Files"](/docs/api/parse-options)
|
||||
[^2]: See [`read` in "Reading Files"](/docs/api/parse-options).
|
||||
[^3]: See ["SheetJS Data Model"](/docs/csf/) for more details.
|
||||
[^4]: See [`sheet_to_json` in "Utilities"](/docs/api/utilities/array#array-output)
|
||||
[^5]: See [`readFile` in "Reading Files"](/docs/api/parse-options)
|
||||
[^6]: See [`sheet_to_json` in "Utilities"](/docs/api/utilities/array#array-output)
|
||||
[^4]: See [`sheet_to_json` in "Utilities"](/docs/api/utilities/array#array-output).
|
||||
[^5]: See [`readFile` in "Reading Files"](/docs/api/parse-options).
|
||||
[^6]: See [`sheet_to_json` in "Utilities"](/docs/api/utilities/array#array-output).
|
||||
[^7]: See [`getStaticProps`](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props) in the NextJS documentation.
|
||||
[^8]: See [`getStaticPaths`](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths) in the NextJS documentation.
|
||||
[^9]: See [`getServerSideProps`](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props) in the NextJS documentation.
|
||||
[^10]: See [`fallback` in getStaticPaths](https://nextjs.org/docs/pages/api-reference/functions/get-static-paths#fallback-false) in the NextJS documentation.
|
||||
[^11]: See [`sheet_to_html` in "Utilities"](/docs/api/utilities/html#html-table-output)
|
||||
[^12]: [`dangerouslySetInnerHTML`](https://react.dev/reference/react-dom/components/common#common-props) is a ReactJS prop supported for all built-in components.
|
||||
[^13]: See [`sheet_to_json` in "Utilities"](/docs/api/utilities/array#array-output)
|
||||
[^14]: See ["Array of Objects" in the ReactJS demo](/docs/demos/frontend/react#rendering-data)
|
||||
[^13]: See [`sheet_to_json` in "Utilities"](/docs/api/utilities/array#array-output).
|
||||
[^14]: See ["Array of Objects" in the ReactJS demo](/docs/demos/frontend/react#rendering-data).
|
||||
|
||||
@ -190,7 +190,7 @@ Deno.writeFileSync(out_file, new TextEncoder().encode(csv));`}
|
||||
|
||||
:::note Tested Deployments
|
||||
|
||||
This was last tested by SheetJS users on 2023 December 04.
|
||||
This was last tested by SheetJS users on 2024 June 07.
|
||||
|
||||
:::
|
||||
|
||||
|
||||
55
tests/bundler-esbuild.sh
Executable file
55
tests/bundler-esbuild.sh
Executable file
@ -0,0 +1,55 @@
|
||||
#!/bin/bash
|
||||
# https://docs.sheetjs.com/docs/demos/frontend/bundler/esbuild
|
||||
cd /tmp
|
||||
rm -rf sheetjs-esbrowser
|
||||
|
||||
mkdir sheetjs-esbrowser
|
||||
cd sheetjs-esbrowser
|
||||
npm init -y
|
||||
|
||||
npm i --save https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz
|
||||
curl -LO https://docs.sheetjs.com/esbuild/esbrowser.js
|
||||
curl -LO https://docs.sheetjs.com/esbuild/esbnode.js
|
||||
|
||||
cat >index.html <<EOF
|
||||
<body><script src="esb.browser.js"></script></body>
|
||||
EOF
|
||||
|
||||
cat >test.js <<EOF
|
||||
const puppeteer = require('puppeteer');
|
||||
const express = require('express');
|
||||
const app = express();
|
||||
app.use(express.static('./'));
|
||||
app.listen(7262, async() => {
|
||||
await new Promise((res,rej) => setTimeout(res, 1000));
|
||||
const browser = await puppeteer.launch();
|
||||
const page = await browser.newPage();
|
||||
page.on("console", msg => console.log("PAGE LOG:", msg.text()));
|
||||
await page.setViewport({width: 1920, height: 1080});
|
||||
const client = await page.target().createCDPSession();
|
||||
await client.send('Browser.setDownloadBehavior', {
|
||||
behavior: 'allow',
|
||||
downloadPath: require("path").resolve('./')
|
||||
});
|
||||
page.on('request', req => console.log(req.url()));
|
||||
await page.goto('http://localhost:7262/');
|
||||
await new Promise((res,rej) => setTimeout(res, 1000));
|
||||
await browser.close();
|
||||
process.exit();
|
||||
});
|
||||
EOF
|
||||
|
||||
for n in 0.9.7 0.10.2 0.11.23 0.12.29 0.13.15 0.14.54 0.15.18 0.16.17 0.17.19 0.18.20 0.19.12 0.20.2 0.21.4; do
|
||||
npx -y esbuild@$n --version
|
||||
|
||||
## Browser Test
|
||||
npx -y esbuild@$n esbrowser.js --bundle --outfile=esb.browser.js
|
||||
node test.js
|
||||
npx -y xlsx-cli Presidents.xlsx | head -n 3
|
||||
rm -f esb.browser.js Presidents.xlsx
|
||||
|
||||
npx -y esbuild@$n esbnode.js --bundle --platform=node --outfile=esb.node.js
|
||||
node esb.node.js
|
||||
npx -y xlsx-cli Presidents.xlsx | head -n 3
|
||||
rm -f esb.node.js Presidents.xlsx
|
||||
done
|
||||
Loading…
Reference in New Issue
Block a user