2016-10-06 01:52:50 +02:00
|
|
|
{
|
2018-10-01 01:02:10 +02:00
|
|
|
"name": "nextjs-project",
|
2021-09-21 19:17:16 +02:00
|
|
|
"version": "0.0.0",
|
2018-10-01 01:02:10 +02:00
|
|
|
"private": true,
|
2022-07-06 17:08:00 +02:00
|
|
|
"workspaces": [
|
|
|
|
|
"packages/*"
|
|
|
|
|
],
|
2016-10-06 01:52:50 +02:00
|
|
|
"scripts": {
|
2022-01-06 16:45:04 +01:00
|
|
|
"new-error": "plop error",
|
|
|
|
|
"new-test": "plop test",
|
2023-02-08 00:30:02 +01:00
|
|
|
"clean": "lerna clean -y && lerna bootstrap && lerna run clean && lerna exec 'rm -rf ./dist'",
|
2022-05-31 02:05:27 +02:00
|
|
|
"build": "turbo run build",
|
2018-10-01 01:02:10 +02:00
|
|
|
"lerna": "lerna",
|
2022-09-30 16:54:38 +02:00
|
|
|
"dev": "turbo run dev --parallel",
|
2023-02-08 00:30:02 +01:00
|
|
|
"test-types": "tsc",
|
2023-03-03 00:09:48 +01:00
|
|
|
"test-unit": "jest test/unit/ packages/next/ packages/font",
|
2022-05-29 06:35:16 +02:00
|
|
|
"test-dev": "cross-env NEXT_TEST_MODE=dev pnpm testheadless",
|
|
|
|
|
"test-start": "cross-env NEXT_TEST_MODE=start pnpm testheadless",
|
|
|
|
|
"test-deploy": "cross-env NEXT_TEST_MODE=deploy pnpm testheadless",
|
2023-01-03 23:43:55 +01:00
|
|
|
"testonly-dev": "cross-env NEXT_TEST_MODE=dev pnpm testonly",
|
|
|
|
|
"testonly-start": "cross-env NEXT_TEST_MODE=start pnpm testonly",
|
|
|
|
|
"testonly-deploy": "cross-env NEXT_TEST_MODE=deploy pnpm testonly",
|
|
|
|
|
"test": "pnpm testheadless",
|
2023-02-08 00:30:02 +01:00
|
|
|
"testonly": "jest --runInBand",
|
2022-05-29 06:35:16 +02:00
|
|
|
"testheadless": "cross-env HEADLESS=true pnpm testonly",
|
2023-02-08 00:30:02 +01:00
|
|
|
"test-pack": "cross-env TS_NODE_TRANSPILE_ONLY=1 node --loader ts-node/esm scripts/test-pack-package.mts",
|
2020-05-21 14:07:27 +02:00
|
|
|
"genstats": "cross-env LOCAL_STATS=true node .github/actions/next-stats-action/src/index.js",
|
2019-03-17 17:43:03 +01:00
|
|
|
"git-reset": "git reset --hard HEAD",
|
|
|
|
|
"git-clean": "git clean -d -x -e node_modules -e packages -f",
|
2022-09-30 16:54:38 +02:00
|
|
|
"lint-typescript": "turbo run typescript",
|
2021-08-25 19:33:57 +02:00
|
|
|
"lint-eslint": "eslint . --ext js,jsx,ts,tsx --max-warnings=0 --config .eslintrc.json --no-eslintrc",
|
2021-01-11 20:24:17 +01:00
|
|
|
"lint-no-typescript": "run-p prettier-check lint-eslint",
|
2021-08-24 14:52:45 +02:00
|
|
|
"lint": "run-p test-types lint-typescript prettier-check lint-eslint lint-language",
|
2022-05-29 06:35:16 +02:00
|
|
|
"lint-fix": "pnpm prettier-fix && eslint . --ext js,jsx,ts,tsx --fix --max-warnings=0 --config .eslintrc.json --no-eslintrc",
|
2021-06-22 18:03:12 +02:00
|
|
|
"lint-language": "alex .",
|
2020-09-14 04:53:19 +02:00
|
|
|
"prettier-check": "prettier --check .",
|
|
|
|
|
"prettier-fix": "prettier --write .",
|
2019-07-11 02:59:53 +02:00
|
|
|
"types": "lerna run types --stream",
|
2022-05-31 02:05:27 +02:00
|
|
|
"typescript": "turbo run typescript",
|
|
|
|
|
"prepublishOnly": "turbo run build",
|
2023-03-24 00:28:49 +01:00
|
|
|
"publish-canary": "git checkout canary && git pull && lerna version prerelease --preid canary --force-publish && release --pre --skip-questions --show-url",
|
2019-02-11 08:44:28 +01:00
|
|
|
"publish-stable": "lerna version --force-publish",
|
2019-04-09 17:52:03 +02:00
|
|
|
"lint-staged": "lint-staged",
|
2021-07-01 13:41:27 +02:00
|
|
|
"next-with-deps": "./scripts/next-with-deps.sh",
|
2023-01-05 22:27:05 +01:00
|
|
|
"next": "cross-env NEXT_TELEMETRY_DISABLED=1 node --trace-deprecation --enable-source-maps packages/next/dist/bin/next",
|
|
|
|
|
"next-no-sourcemaps": "cross-env NEXT_TELEMETRY_DISABLED=1 node --trace-deprecation packages/next/dist/bin/next",
|
|
|
|
|
"clean-trace-jaeger": "rm -rf test/integration/basic/.next && TRACE_TARGET=JAEGER pnpm next build test/integration/basic",
|
|
|
|
|
"debug": "cross-env NEXT_TELEMETRY_DISABLED=1 node --inspect packages/next/dist/bin/next",
|
2023-03-22 00:40:44 +01:00
|
|
|
"postinstall": "git config index.skipHash false && node scripts/install-native.mjs",
|
2023-01-16 05:21:39 +01:00
|
|
|
"version": "npx pnpm@7.24.3 install && IS_PUBLISH=yes ./scripts/check-pre-compiled.sh && git add .",
|
2023-03-02 03:15:02 +01:00
|
|
|
"prepare": "husky install",
|
|
|
|
|
"sync-react": "node ./scripts/sync-react.js"
|
2016-10-06 01:52:50 +02:00
|
|
|
},
|
2018-10-01 01:02:10 +02:00
|
|
|
"devDependencies": {
|
2022-05-31 03:00:12 +02:00
|
|
|
"@babel/core": "7.18.0",
|
|
|
|
|
"@babel/eslint-parser": "7.18.2",
|
|
|
|
|
"@babel/generator": "7.18.0",
|
2022-06-02 15:09:21 +02:00
|
|
|
"@babel/parser": "7.12.11",
|
2021-08-17 09:18:08 +02:00
|
|
|
"@babel/plugin-proposal-object-rest-spread": "7.14.7",
|
|
|
|
|
"@babel/preset-flow": "7.14.5",
|
|
|
|
|
"@babel/preset-react": "7.14.5",
|
2023-02-17 15:10:09 +01:00
|
|
|
"@edge-runtime/jest-environment": "2.0.5",
|
2019-12-12 00:54:40 +01:00
|
|
|
"@fullhuman/postcss-purgecss": "1.3.0",
|
2023-02-11 13:37:00 +01:00
|
|
|
"@mdx-js/loader": "2.2.1",
|
|
|
|
|
"@mdx-js/react": "2.2.1",
|
2022-05-29 06:35:16 +02:00
|
|
|
"@next/bundle-analyzer": "workspace:*",
|
|
|
|
|
"@next/env": "workspace:*",
|
|
|
|
|
"@next/eslint-plugin-next": "workspace:*",
|
2022-09-22 00:10:24 +02:00
|
|
|
"@next/font": "workspace:*",
|
2022-05-29 06:35:16 +02:00
|
|
|
"@next/mdx": "workspace:*",
|
|
|
|
|
"@next/plugin-storybook": "workspace:*",
|
|
|
|
|
"@next/polyfill-module": "workspace:*",
|
|
|
|
|
"@next/polyfill-nomodule": "workspace:*",
|
|
|
|
|
"@next/swc": "workspace:*",
|
2023-03-16 17:35:07 +01:00
|
|
|
"@opentelemetry/api": "1.4.1",
|
2021-06-18 02:40:22 +02:00
|
|
|
"@svgr/webpack": "5.5.0",
|
2022-03-05 22:45:30 +01:00
|
|
|
"@swc/cli": "0.1.55",
|
2022-06-21 17:51:47 +02:00
|
|
|
"@swc/core": "1.2.203",
|
2022-11-20 03:18:31 +01:00
|
|
|
"@swc/helpers": "0.4.14",
|
2022-04-05 23:51:47 +02:00
|
|
|
"@testing-library/react": "13.0.0",
|
2020-02-12 02:16:42 +01:00
|
|
|
"@types/cheerio": "0.22.16",
|
2020-04-19 19:58:31 +02:00
|
|
|
"@types/fs-extra": "8.1.0",
|
2022-08-17 01:29:55 +02:00
|
|
|
"@types/html-validator": "5.0.3",
|
2020-02-04 20:08:03 +01:00
|
|
|
"@types/http-proxy": "1.17.3",
|
2019-05-23 09:52:36 +02:00
|
|
|
"@types/jest": "24.0.13",
|
2022-10-22 20:19:14 +02:00
|
|
|
"@types/node": "14.14.31",
|
2022-09-09 00:17:15 +02:00
|
|
|
"@types/node-fetch": "2.6.1",
|
2022-05-29 06:35:16 +02:00
|
|
|
"@types/react": "16.9.17",
|
|
|
|
|
"@types/react-dom": "16.9.4",
|
2022-02-01 19:18:55 +01:00
|
|
|
"@types/relay-runtime": "13.0.0",
|
2021-09-13 14:36:25 +02:00
|
|
|
"@types/selenium-webdriver": "4.0.15",
|
2021-11-17 21:31:16 +01:00
|
|
|
"@types/sharp": "0.29.3",
|
2019-04-02 16:09:34 +02:00
|
|
|
"@types/string-hash": "1.1.1",
|
Route Loader Trusted Types Violation Fix (#34730)
Linked to issue #32209.
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation
There is one tsec violation that is fixed in this PR:
### 1. ban-script-src-assignment: route-loader.ts
XSS can occur with the line script.src = src in appendScript(src, script) if src can be controlled by a malicious user. From tracing through the code, it was determined that src comes from the function `getFilesForRoute(route)`. The behaviour of this function differs depending on the environment (development vs. production), but in both cases the function will construct strings that lead to valid file paths. These strings depend on two variables: `assetPrefix` and `route`, but due to the nature of the constructed strings it was determined that the scripts here are safe to use. Thus, the solution was to promote these strings to `TrustedScriptURL`s. This is the Trusted Types way of declaring that the script URL passed to the DOM sink is safe from DOM XSS attacks.
To create a `TrustedScriptURL`, a policy needs to be created. This policy was put in its own file: `client/trusted-types.ts`. This policy has the name `nextjs`. If this name should be changed to something else, feel free to change it now. However, once it is released to the public and application developers begin using it, it may be harder to change the value since any application developers with a custom policy name allowlist would now need to update their `next.config.js` headers to allow this new name.
The code was tested in a sample application to ensure it behaved as expected.
2022-05-04 01:22:08 +02:00
|
|
|
"@types/trusted-types": "2.0.2",
|
2021-08-17 09:18:08 +02:00
|
|
|
"@typescript-eslint/eslint-plugin": "4.29.1",
|
|
|
|
|
"@typescript-eslint/parser": "4.29.1",
|
2021-08-06 17:20:05 +02:00
|
|
|
"@vercel/fetch": "6.1.1",
|
2023-03-23 01:12:22 +01:00
|
|
|
"@vercel/og": "0.4.1",
|
2021-09-21 19:17:16 +02:00
|
|
|
"@webassemblyjs/ast": "1.11.1",
|
|
|
|
|
"@webassemblyjs/floating-point-hex-parser": "1.11.1",
|
|
|
|
|
"@webassemblyjs/helper-api-error": "1.11.1",
|
|
|
|
|
"@webassemblyjs/helper-buffer": "1.11.1",
|
|
|
|
|
"@webassemblyjs/helper-code-frame": "npm:empty-npm-package@1.0.0",
|
|
|
|
|
"@webassemblyjs/helper-module-context": "npm:empty-npm-package@1.0.0",
|
|
|
|
|
"@webassemblyjs/helper-numbers": "1.11.1",
|
|
|
|
|
"@webassemblyjs/helper-wasm-bytecode": "1.11.1",
|
|
|
|
|
"@webassemblyjs/helper-wasm-section": "1.11.1",
|
|
|
|
|
"@webassemblyjs/ieee754": "1.11.1",
|
|
|
|
|
"@webassemblyjs/leb128": "1.11.1",
|
|
|
|
|
"@webassemblyjs/utf8": "1.11.1",
|
|
|
|
|
"@webassemblyjs/wasm-edit": "1.11.1",
|
|
|
|
|
"@webassemblyjs/wasm-gen": "1.11.1",
|
|
|
|
|
"@webassemblyjs/wasm-opt": "1.11.1",
|
|
|
|
|
"@webassemblyjs/wasm-parser": "1.11.1",
|
|
|
|
|
"@webassemblyjs/wast-parser": "npm:empty-npm-package@1.0.0",
|
|
|
|
|
"@webassemblyjs/wast-printer": "1.11.1",
|
2018-11-20 15:54:28 +01:00
|
|
|
"@zeit/next-typescript": "1.1.2-canary.0",
|
2019-05-23 09:52:36 +02:00
|
|
|
"abort-controller": "3.0.0",
|
2021-06-22 18:03:12 +02:00
|
|
|
"alex": "9.1.0",
|
2023-03-24 00:28:49 +01:00
|
|
|
"ansi-escapes": "4.3.2",
|
2022-02-04 03:33:38 +01:00
|
|
|
"amphtml-validator": "1.0.35",
|
2019-09-10 19:11:55 +02:00
|
|
|
"async-sema": "3.0.1",
|
2022-12-04 04:49:00 +01:00
|
|
|
"body-parser": "1.20.1",
|
2022-04-22 13:14:29 +02:00
|
|
|
"browserslist": "4.20.2",
|
2022-12-04 04:49:00 +01:00
|
|
|
"buffer": "5.6.0",
|
2022-06-29 22:57:51 +02:00
|
|
|
"chalk": "5.0.1",
|
2017-02-16 23:53:39 +01:00
|
|
|
"cheerio": "0.22.0",
|
2020-05-11 02:48:57 +02:00
|
|
|
"cookie": "0.4.1",
|
2020-05-16 23:15:12 +02:00
|
|
|
"cors": "2.8.5",
|
2019-05-23 09:52:36 +02:00
|
|
|
"coveralls": "3.0.3",
|
2022-05-29 06:35:16 +02:00
|
|
|
"create-next-app": "workspace:*",
|
2020-12-01 19:02:07 +01:00
|
|
|
"critters": "0.0.6",
|
2019-12-26 21:01:22 +01:00
|
|
|
"cross-env": "6.0.3",
|
2019-02-26 21:57:32 +01:00
|
|
|
"cross-spawn": "6.0.5",
|
2022-03-08 17:15:09 +01:00
|
|
|
"dd-trace": "2.3.0",
|
2022-01-02 23:16:17 +01:00
|
|
|
"es5-ext": "0.10.53",
|
2019-11-25 22:52:29 +01:00
|
|
|
"escape-string-regexp": "2.0.0",
|
2021-04-25 20:34:36 +02:00
|
|
|
"eslint": "7.24.0",
|
2022-05-29 21:59:38 +02:00
|
|
|
"eslint-config-next": "workspace:*",
|
2022-08-08 06:52:02 +02:00
|
|
|
"eslint-plugin-eslint-plugin": "4.3.0",
|
2021-04-25 20:34:36 +02:00
|
|
|
"eslint-plugin-import": "2.22.1",
|
|
|
|
|
"eslint-plugin-jest": "24.3.5",
|
2023-01-12 18:36:29 +01:00
|
|
|
"eslint-plugin-jsdoc": "39.6.4",
|
2021-04-25 20:34:36 +02:00
|
|
|
"eslint-plugin-react": "7.23.2",
|
Implement new client-side router (#37551)
## Client-side router for `app` directory
This PR implements the new router that leverages React 18 concurrent features like Suspense and startTransition.
It also integrates with React Server Components and builds on top of it to allow server-centric routing that only renders the part of the page that has to change.
It's one of the pieces of the implementation of https://nextjs.org/blog/layouts-rfc.
## Details
I'm going to document the differences with the current router here (will be reworked for the upgrade guide)
### Client-side cache
In the current router we have an in-memory cache for getStaticProps data so that if you prefetch and then navigate to a route that has been prefetched it'll be near-instant. For getServerSideProps the behavior is different, any navigation to a page with getServerSideProps fetches the data again.
In the new model the cache is a fundamental piece, it's more granular than at the page level and is set up to ensure consistency across concurrent renders. It can also be invalidated at any level.
#### Push/Replace (also applies to next/link)
The new router still has a `router.push` / `router.replace` method.
There are a few differences in how it works though:
- It only takes `href` as an argument, historically you had to provide `href` (the page path) and `as` (the actual url path) to do dynamic routing. In later versions of Next.js this is no longer required and in the majority of cases `as` was no longer needed. In the new router there's no way to reason about `href` vs `as` because there is no notion of "pages" in the browser.
- Both methods now use `startTransition`, you can wrap these in your own `startTransition` to get `isPending`
- The push/replace support concurrent rendering. When a render is bailed by clicking a different link to navigate to a completely different page that still works and doesn't cause race conditions.
- Support for optimistic loading states when navigating
##### Hard/Soft push/replace
Because of the client-side cache being reworked this now allows us to cover two cases: hard push and soft push.
The main difference between the two is if the cache is reused while navigating. The default for `next/link` is a `hard` push which means that the part of the cache affected by the navigation will be invalidated, e.g. if you already navigated to `/dashboard` and you `router.push('/dashboard')` again it'll get the latest version. This is similar to the existing `getServerSideProps` handling.
In case of a soft push (API to be defined but for testing added `router.softPush('/')`) it'll reuse the existing cache and not invalidate parts that are already filled in. In practice this means it's more like the `getStaticProps` client-side navigation because it does not fetch on navigation except if a part of the page is missing.
#### Back/Forward navigation
Back and Forward navigation ([popstate](https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event)) are always handled as a soft navigation, meaning that the cache is reused, this ensures back/forward navigation is near-instant when it's in the client-side cache. This will also allow back/forward navigation to be a high priority update instead of a transition as it is based on user interaction. Note: in this PR it still uses `startTransition` as there's no way to handle the high priority update suspending which happens in case of missing data in the cache. We're working with the React team on a solution for this particular case.
### Layouts
Note: this section assumes you've read [The layouts RFC](https://nextjs.org/blog/layouts-rfc) and [React Server Components RFC](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html)
React Server Components rendering leverages the Flight streaming mechanism in React 18, this allows sending a serializable representation of the rendered React tree on the server to the browser, the client-side React can use this serialized representation to render components client-side without the JavaScript being sent to the browser. This is one of the building blocks of Server Components. This allows a bunch of interesting features but for now I'll keep it to how it affects layouts.
When you have a `app/dashboard/layout.js` and `app/dashboard/page.js` the page will render as children of the layout, when you add another page like `app/dashboard/integrations/page.js` that page falls under the dashboard layout as well. When client-side navigating the new router automatically figures out if the page you're navigating to can be a smaller render than the whole page, in this case `app/dashboard/page.js` and `app/dashboard/integrations/page.js` share the `app/dashboard/layout.js` so instead of rendering the whole page we render below the layout component, this means the layout itself does not get re-rendered, the layout's `getServerSideProps` would not be called, and the Flight response would only hold the result of `app/dashboard/integrations/page.js`, effectively giving you the smallest patch for the UI.
---
Note: the commits in this PR were mostly work in progress to ensure it wasn't lost along the way. The implementation was reworked a bunch of times to where it is now.
Co-authored-by: Jiachi Liu <4800338+huozhi@users.noreply.github.com>
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-07-06 23:16:47 +02:00
|
|
|
"eslint-plugin-react-hooks": "4.5.0",
|
2022-06-29 22:57:51 +02:00
|
|
|
"event-stream": "4.0.1",
|
2019-07-17 22:53:56 +02:00
|
|
|
"execa": "2.0.3",
|
fix: InferGetServerSidePropsType and InferGetStaticPropsType (#40635)
## Problem
Currently the Next.js infer utility (`InferGetServerSidePropsType` and
`InferGetStaticPropsType`) types can lead to a wrong inferred types
(`never`). This happens if these functions return something different
than: `{props: {}}`.
**Example:** `getServerSideProps`
```typescript
export async function getServerSideProps({ query }: GetServerSidePropsContext) {
if (query.foo) {
return {
notFound: true,
}
}
return {
props: {
foo: "bar"
},
}
}
type PageProps = InferGetServerSidePropsType<typeof getServerSideProps>
// => type PageProps = never
```
**Example:** `getStaticProps`
```typescript
import type { InferGetStaticPropsType, GetStaticPropsContext } from 'next'
export async function getStaticProps(context: GetStaticPropsContext) {
if (context.params?.bar) {
return {
notFound: true,
}
}
return {
props: {
foo: 'bar',
},
}
}
type PageProps = InferGetStaticPropsType<typeof getStaticProps>
// => type PageProps = never
```
This is because the first infer condition of the utility type is not
satified leading to a never result.
```typescript
export type InferGetServerSidePropsType<T> = T extends GetServerSideProps<
infer P, // <- NOT SATISFIED
any
>
? P
: T extends (
context?: GetServerSidePropsContext<any>
) => Promise<GetServerSidePropsResult<infer P>>
? P
: never // <- NOT SATISFIED
```
## Solution
I have experimented with different solutions ending with a much simpler
type, that is faster to execute, easier to read and universally usable
for both prop variations.
```typescript
/**
* Flow:
* - Make sure getStaticProps is a function
* - Get its return type
* - Extract the one that contains {props: any}
* - Return the props
*/
export type InferGetStaticPropsType<T extends (args: any) => any> = Extract<
Awaited<ReturnType<T>>,
{ props: any }
>['props']
```
## Bug
- [x] Related issues: fixes #36615, #15913,
https://twitter.com/leeerob/status/1563540593003106306
- [x] Type tests added
## Future thoughts
Since `InferGetStaticPropsType` and `InferGetServerSidePropsType` are
now the same, it's api could be merged into one utility type (e.g:
InferNextProps). I recommend doing this in a different PR.
## Additional info
I have tested this approach using the following [external
package](https://www.npmjs.com/package/infer-next-props-type)
(@timneutkens sorry for the late PR). Since about 12 Month I haven't
received any negative feedback (issues) regarding this approach.
Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-09-21 00:25:01 +02:00
|
|
|
"expect-type": "0.14.2",
|
2019-05-23 09:52:36 +02:00
|
|
|
"express": "4.17.0",
|
2021-06-18 19:12:20 +02:00
|
|
|
"faker": "5.5.3",
|
2019-07-11 19:02:43 +02:00
|
|
|
"faunadb": "2.6.1",
|
2022-12-04 04:49:00 +01:00
|
|
|
"find-up": "4.1.0",
|
2020-05-29 01:23:35 +02:00
|
|
|
"firebase": "7.14.5",
|
2022-03-08 17:15:09 +01:00
|
|
|
"flat": "5.0.2",
|
2022-11-02 04:45:58 +01:00
|
|
|
"form-data": "4.0.0",
|
2020-03-21 17:02:05 +01:00
|
|
|
"fs-extra": "9.0.0",
|
2020-05-11 02:48:57 +02:00
|
|
|
"get-port": "5.1.1",
|
2020-05-21 14:07:27 +02:00
|
|
|
"glob": "7.1.6",
|
|
|
|
|
"gzip-size": "5.1.1",
|
2022-02-01 01:13:46 +01:00
|
|
|
"html-validator": "5.1.18",
|
2022-12-04 04:49:00 +01:00
|
|
|
"http-proxy": "1.18.1",
|
2022-12-07 17:11:29 +01:00
|
|
|
"husky": "8.0.0",
|
2021-02-18 11:23:24 +01:00
|
|
|
"image-size": "0.9.3",
|
2022-03-07 21:29:11 +01:00
|
|
|
"is-animated": "2.0.2",
|
2018-12-04 10:59:12 +01:00
|
|
|
"isomorphic-unfetch": "3.0.0",
|
2021-08-23 20:36:56 +02:00
|
|
|
"jest": "27.0.6",
|
2022-06-30 18:31:33 +02:00
|
|
|
"jest-extended": "1.2.1",
|
2023-01-04 00:45:05 +01:00
|
|
|
"json5": "2.2.3",
|
2020-05-12 21:58:21 +02:00
|
|
|
"ky": "0.19.1",
|
|
|
|
|
"ky-universal": "0.6.0",
|
2021-02-12 13:34:25 +01:00
|
|
|
"lerna": "4.0.0",
|
2020-05-02 21:47:16 +02:00
|
|
|
"lint-staged": "10.1.7",
|
2022-12-04 04:49:00 +01:00
|
|
|
"lodash": "4.17.20",
|
2020-05-15 23:15:15 +02:00
|
|
|
"lost": "8.3.1",
|
2020-05-21 14:07:27 +02:00
|
|
|
"minimatch": "3.0.4",
|
2019-08-20 21:19:45 +02:00
|
|
|
"moment": "^2.24.0",
|
2022-05-29 06:35:16 +02:00
|
|
|
"nanoid": "3.1.30",
|
2022-05-29 21:59:38 +02:00
|
|
|
"next": "workspace:*",
|
2022-01-19 17:48:11 +01:00
|
|
|
"node-fetch": "2.6.7",
|
2023-03-22 20:56:39 +01:00
|
|
|
"node-pty": "0.10.1",
|
2019-11-27 20:26:40 +01:00
|
|
|
"npm-run-all": "4.1.5",
|
2019-12-12 16:51:38 +01:00
|
|
|
"nprogress": "0.2.0",
|
2019-12-11 17:51:10 +01:00
|
|
|
"pixrem": "5.0.0",
|
2022-12-07 23:14:55 +01:00
|
|
|
"playwright-chromium": "1.28.1",
|
2022-01-06 16:45:04 +01:00
|
|
|
"plop": "3.0.5",
|
2023-03-07 07:28:53 +01:00
|
|
|
"postcss": "8.4.14",
|
2020-05-15 23:15:15 +02:00
|
|
|
"postcss-nested": "4.2.1",
|
2019-12-11 17:51:10 +01:00
|
|
|
"postcss-pseudoelements": "5.0.0",
|
2019-11-25 22:52:29 +01:00
|
|
|
"postcss-short-size": "4.0.0",
|
|
|
|
|
"postcss-trolling": "0.1.7",
|
2022-03-06 21:41:22 +01:00
|
|
|
"prettier": "2.5.1",
|
2020-05-21 14:07:27 +02:00
|
|
|
"pretty-bytes": "5.3.0",
|
|
|
|
|
"pretty-ms": "7.0.0",
|
2021-09-13 15:49:29 +02:00
|
|
|
"random-seed": "0.3.0",
|
2022-06-15 17:14:43 +02:00
|
|
|
"react": "18.2.0",
|
2022-04-05 23:51:47 +02:00
|
|
|
"react-17": "npm:react@17.0.2",
|
2023-03-22 21:26:46 +01:00
|
|
|
"react-builtin": "npm:react@18.3.0-next-12a1d140e-20230321",
|
2022-06-15 17:14:43 +02:00
|
|
|
"react-dom": "18.2.0",
|
2022-04-05 23:51:47 +02:00
|
|
|
"react-dom-17": "npm:react-dom@17.0.2",
|
2023-03-22 21:26:46 +01:00
|
|
|
"react-dom-builtin": "npm:react-dom@18.3.0-next-12a1d140e-20230321",
|
|
|
|
|
"react-server-dom-webpack": "18.3.0-next-12a1d140e-20230321",
|
2020-01-04 17:40:18 +01:00
|
|
|
"react-ssr-prepass": "1.0.8",
|
2022-03-05 22:45:30 +01:00
|
|
|
"react-virtualized": "9.22.3",
|
2022-02-01 19:18:55 +01:00
|
|
|
"relay-compiler": "13.0.2",
|
|
|
|
|
"relay-runtime": "13.0.2",
|
2022-06-24 22:02:40 +02:00
|
|
|
"release": "6.3.1",
|
2019-05-23 09:52:36 +02:00
|
|
|
"request-promise-core": "1.1.2",
|
2021-09-13 14:36:25 +02:00
|
|
|
"resolve-from": "5.0.0",
|
2022-12-14 19:52:52 +01:00
|
|
|
"rimraf": "3.0.2",
|
2022-07-27 06:12:54 +02:00
|
|
|
"sass": "1.54.0",
|
2020-08-21 20:50:24 +02:00
|
|
|
"seedrandom": "3.0.5",
|
2021-09-13 14:36:25 +02:00
|
|
|
"selenium-webdriver": "4.0.0-beta.4",
|
2022-05-29 06:35:16 +02:00
|
|
|
"semver": "7.3.7",
|
2021-10-29 18:12:46 +02:00
|
|
|
"shell-quote": "1.7.3",
|
2022-12-04 04:49:00 +01:00
|
|
|
"strip-ansi": "6.0.0",
|
2022-11-02 14:18:08 +01:00
|
|
|
"styled-components": "6.0.0-beta.5",
|
2022-12-20 00:58:50 +01:00
|
|
|
"styled-jsx": "5.1.1",
|
2020-11-06 03:33:14 +01:00
|
|
|
"styled-jsx-plugin-postcss": "3.0.2",
|
2023-01-12 18:36:29 +01:00
|
|
|
"swr": "^2.0.0",
|
feat(cli): introduce `--tailwind` flag (#46927)
### What?
This PR introduces a new `--tailwind` flag to the `create-next-app` CLI,
to make it easier to bootstrap a Next.js app with Tailwind CSS
pre-configured. This is going to be the **default**. To opt-out of
Tailwind CSS, you can use the `--no-tailwind` flag.
### Why?
Tailwind CSS is one of the most popular styling solutions right now, and
we would like to make it easier to get started.
Currently, the closest you can come to this is by running `pnpm create
next-app -e with-tailwindcss` which will clone the
https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss
example. But that example is not configured for the App Router. This PR
will let you add Tailwind CSS to both `app/`, `pages/`, and start out
with TypeScript or JavaScript via the CLI prompts.
(Some community feedback
https://twitter.com/dev_jonaskaas/status/1632367991827443713,
https://twitter.com/samselikoff/status/1634662473331617794)
### How?
We are adding 4 new templates to the CLI bundle.
> Note: The styling is not pixel-perfect compared to the current
templates (using CSS modules) to require fewer overrides, but I tried to
match it as close as possible. Here are a few screenshots:
<details>
<summary><b>Current, light</b></summary>
<img
src="https://user-images.githubusercontent.com/18369201/224733372-9dba86fe-9191-471d-ad9f-ab904c47f544.png"/>
</details>
<details>
<summary><b>Tailwind (new), light</b></summary>
<img
src="https://user-images.githubusercontent.com/18369201/224733610-038d9d0f-634d-4b69-b5c2-a5056b56760c.png"/>
</details>
<details>
<summary><b>Current, dark, responsive</b></summary>
<img
src="https://user-images.githubusercontent.com/18369201/224733790-9b4d730c-0336-4dbe-bc10-1cae1d7fd145.png"/>
</details>
<details>
<summary><b>Tailwind (new), dark, responsive</b></summary>
<img
src="https://user-images.githubusercontent.com/18369201/224734375-28384bbc-2c3a-4125-8f29-c102f3b7aa1d.png"/>
</details>
#### For reviewers
This introduces 4 new templates, with a very similar code base to the
original ones. To keep the PR focused, I decided to copy over duplicate
code, but we could potentially create a shared folder for files that are
the same across templates to somewhat reduce the CLI size. Not sure if
it's worth it, let me know. Probably fine for now, but something to
consider if we are adding more permutations in the future.
---
~Work remaining:~
- [x] app+ts
- [x] layout
- [x] dark mode
- [x] media queries
- [x] animations
- [x] app+js
- [x] pages+ts
- [x] pages+js
- [x] prompt/config
- [x] deprecate Tailwind CSS example in favor of CLI
- [x] update docs
- [x] add test
- [x] add [Prettier
plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss)
Closes NEXT-772
Related #45814, #44286
2023-03-16 16:06:27 +01:00
|
|
|
"tailwindcss": "3.2.7",
|
2017-09-27 20:11:02 +02:00
|
|
|
"taskr": "1.1.0",
|
2020-10-23 09:52:37 +02:00
|
|
|
"tree-kill": "1.2.2",
|
2023-01-18 20:35:28 +01:00
|
|
|
"ts-node": "10.9.1",
|
2022-02-25 01:59:18 +01:00
|
|
|
"tsec": "0.2.1",
|
2022-11-14 20:52:12 +01:00
|
|
|
"turbo": "1.6.3",
|
2022-08-29 18:56:02 +02:00
|
|
|
"typescript": "4.8.2",
|
2022-12-04 04:49:00 +01:00
|
|
|
"unfetch": "4.2.0",
|
2018-10-12 15:32:17 +02:00
|
|
|
"wait-port": "0.2.2",
|
2022-08-16 11:55:37 +02:00
|
|
|
"webpack": "5.74.0",
|
2022-12-04 04:49:00 +01:00
|
|
|
"webpack-bundle-analyzer": "4.7.0",
|
2022-12-07 17:11:29 +01:00
|
|
|
"whatwg-fetch": "3.0.0",
|
2022-12-04 04:49:00 +01:00
|
|
|
"ws": "8.2.3"
|
2018-11-03 17:42:43 +01:00
|
|
|
},
|
2019-10-23 03:02:59 +02:00
|
|
|
"resolutions": {
|
2022-04-22 13:14:29 +02:00
|
|
|
"browserslist": "4.20.2",
|
2022-09-19 16:48:41 +02:00
|
|
|
"caniuse-lite": "1.0.30001406",
|
2022-05-31 03:00:12 +02:00
|
|
|
"@babel/core": "7.18.0",
|
|
|
|
|
"@babel/parser": "7.18.0",
|
|
|
|
|
"@babel/types": "7.18.0",
|
|
|
|
|
"@babel/traverse": "7.18.0"
|
2019-10-23 03:02:59 +02:00
|
|
|
},
|
2018-11-03 17:42:43 +01:00
|
|
|
"engines": {
|
2022-10-25 06:47:54 +02:00
|
|
|
"node": ">=14.6.0"
|
2022-06-17 19:36:37 +02:00
|
|
|
},
|
2023-01-12 02:36:52 +01:00
|
|
|
"packageManager": "pnpm@7.24.3"
|
2016-10-06 01:52:50 +02:00
|
|
|
}
|
