Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lightbasenl/next-preset
An easy to use preset for Next.js projects at Lightbase
https://github.com/lightbasenl/next-preset
Last synced: 24 days ago
JSON representation
An easy to use preset for Next.js projects at Lightbase
- Host: GitHub
- URL: https://github.com/lightbasenl/next-preset
- Owner: lightbasenl
- Created: 2021-07-05T11:07:30.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-14T23:29:09.000Z (almost 2 years ago)
- Last Synced: 2024-11-19T01:51:24.738Z (about 1 month ago)
- Language: TypeScript
- Size: 190 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# next-preset
An easy to use preset for Next.js projects at Lightbase
### Page extensions
The following page extensions are configured by next-preset:
`api.ts`, `page.tsx`
This means that `_app.tsx` becomes `_app.page.tsx`, `_document.tsx` becomes `_document.page.tsx`, etc.
This configuration allows the placement of component files in the `/pages` directory, for storing local components with the page they're used on, without them becoming available as a route.
```
...
├── ...
├── src
│ ├── pages
│ │ ├── about-us
│ │ │ ├── components
│ │ │ │ └── Employee.tsx 👈 The component
│ │ │ └── index.page.tsx 👈 The page
├── ...
```
### Default headers
These headers are configured by default, because they're considered good security practice.
You can overwrite these headers by [setting the header yourself in `next.config.js`](https://nextjs.org/docs/api-reference/next.config.js/headers).
| Header | Value |
|---------------------------|------------------------|
| x-frame-options | deny |
| content-security-policy. | frame-ancestors 'none' |
| x-content-type-options | nosniff |
| Referrer-Policy | same-origin |
| Strict-Transport-Security | max-age=31536000 |
| Permissions-Policy | interest-cohort=() |
### Browser compatibility
When next-preset is used, a check is run on `next build` to make sure that the output does not contain any non-ES5 JavaScript code. This is done so your app does not unexpectedly break in certain browsers.
When offending output is found, the build fails and you're notified.
```
[PRESET] Checking browser compatibility...
[PRESET]
You might want to add the following entries to `preset.transpileModules` in `next.config.js`:
- yup
For more information, see: https://github.com/martpie/next-transpile-modules
```
Most modules can be transpiled. Modules that can't be transpiled can be ignored. Be sure to check if the module can be safely ignored or if you need to take additional steps per the modules' instructions.
#### Transpile modules
[next-transpile-modules](https://github.com/martpie/next-transpile-modules#readme) is included and configured by next-preset.
Modules to be transpiled can be added by setting the `preset.transpileModules` option in `next.config.js`.
```js
const { withPreset } = require("@lightbase/next-preset");
module.exports = withPreset({
...
preset: {
transpileModules: [
"yup",
"dequal",
],
...
},
...
});
```
#### Ignore modules
Some modules produce non-ES5 code and cannot be transpiled, e.g. Mapbox-GL. Usually the module does not support older browsers, so it does not make sense for them to transpile to ES5 or support it.
Modules to be ignored can be added by setting the `preset.ignoreModules` option in `next.config.js`.
```js
const { withPreset } = require("@lightbase/next-preset");
module.exports = withPreset({
...
preset: {
ignoreModules: ["mapbox-gl"],
...
},
...
});
```
#### Source maps
In order for the browser compatibility check to function, source maps are enabled and will be available alongside your app.
If you're using [@sentry/nextjs](https://github.com/getsentry/sentry-javascript/tree/master/packages/nextjs), source maps are already enabled.