Skip to content

Commit f0ead6f

Browse files
authored
feat: upgraded to next@11 and other (dev)Dependencies (#39)
1 parent 55edd54 commit f0ead6f

File tree

13 files changed

+3822
-2359
lines changed

13 files changed

+3822
-2359
lines changed

.eslintrc.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
module.exports = {
2-
extends: 'eslint-config-ns-ts',
2+
extends: [
3+
'eslint-config-ns-ts',
4+
// @see https://nextjs.org/docs/basic-features/eslint
5+
'plugin:@next/next/recommended'
6+
],
37
rules: {
48
/**
59
* This rule was disabled because of NextJS' Link API.

.storybook/i18n.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { initReactI18next } from 'react-i18next'
2+
import i18n from 'i18next';
3+
4+
import Backend from 'i18next-xhr-backend';
5+
import LanguageDetector from 'i18next-browser-languagedetector';
6+
7+
8+
/**
9+
* Example
10+
* - @see https://github.com/i18next/react-i18next/blob/7cfab9746b3ccc6f833cd9c892e7c3c804944a5e/example/react-typescript4.1/namespaces/src/i18n/config.ts#L13
11+
*/
12+
i18n
13+
.use(Backend)
14+
.use(LanguageDetector)
15+
.use(initReactI18next)
16+
.init({
17+
lng: 'en',
18+
fallbackLng: 'en',
19+
// have a common namespace used around the full app
20+
ns: ['common'],
21+
defaultNS: 'common',
22+
debug: true,
23+
interpolation: {
24+
escapeValue: false, // not needed for react!!
25+
},
26+
// resources: {
27+
// en: {
28+
// 'common': {
29+
// "home": "Home GERMAN",
30+
// "home_EN": "Home English"
31+
// }
32+
// },
33+
// de: {
34+
// 'common': {
35+
// "home": "Home DEUTSCH",
36+
// "home_EN": "Home ENGLISCH"
37+
// }
38+
// }
39+
// },
40+
})
41+
42+
export default i18n

.storybook/main.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ module.exports = {
1313
addons: [
1414
'@storybook/addon-links',
1515
'@storybook/addon-essentials',
16+
'storybook-addon-next-router',
17+
'storybook-addon-i18next/register',
1618
{
1719
/**
1820
* NOTE: fix Storybook issue with PostCSS@8
@@ -44,6 +46,24 @@ module.exports = {
4446
...config.resolve?.alias,
4547
'@': [path.resolve(__dirname, '../src/'), path.resolve(__dirname, '../')],
4648
}
49+
50+
/**
51+
* Fixes issue with `next-i18next` and is ready for webpack@5
52+
* @see https://github.com/isaachinman/next-i18next/issues/1012#issuecomment-792697008
53+
* @see https://github.com/storybookjs/storybook/issues/4082#issuecomment-758272734
54+
* @see https://webpack.js.org/migrate/5/
55+
*
56+
* source: https://github.com/isaachinman/next-i18next/issues/1012#issuecomment-818042184
57+
*/
58+
config.resolve.fallback = {
59+
...config.resolve?.fallback,
60+
fs: false,
61+
// tls: false,
62+
// net: false,
63+
// module: false,
64+
// path: require.resolve('path-browserify'),
65+
}
66+
4767
return config
4868
},
4969
}

.storybook/preview.js

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,11 @@
1-
import { withNextRouter } from 'storybook-addon-next-router'
1+
import React, { Suspense } from 'react';
2+
import { RouterContext } from "next/dist/next-server/lib/router-context";
3+
// import { I18nextProvider } from 'react-i18next';
4+
import { withI18next } from 'storybook-addon-i18next';
25

36
import '../src/styles/index.scss'
47

5-
// @see https://www.npmjs.com/package/storybook-addon-next-router
6-
export const decorators = [
7-
withNextRouter({
8-
path: '/', // defaults to `/`
9-
asPath: '/', // defaults to `/`
10-
query: {}, // defaults to `{}`
11-
push() {}, // defaults to using addon actions integration, can override any method in the router
12-
}),
13-
]
8+
import i18n from './i18n'
149

1510
export const parameters = {
1611
actions: { argTypesRegex: '^on[A-Z].*' },
@@ -20,4 +15,18 @@ export const parameters = {
2015
date: /Date$/,
2116
},
2217
},
18+
// @see https://www.npmjs.com/package/storybook-addon-next-router
19+
nextRouter: {
20+
Provider: RouterContext.Provider,
21+
path: '/', // defaults to `/`
22+
asPath: '/', // defaults to `/`
23+
query: {}, // defaults to `{}`
24+
push() {}, // defaults to using addon actions integration, can override any method in the router
25+
}
2326
}
27+
28+
export const decorators = [
29+
// Story => <I18nextProvider i18n={i18n}><Story /></I18nextProvider>,
30+
withI18next({ i18n, languages: { en: 'English', de: 'Deutsch' }}),
31+
Story => <Suspense fallback='loading...'><Story /></Suspense>
32+
]

__mocks__/react-i18next.js

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/* eslint-disable @typescript-eslint/no-var-requires */
2+
/* eslint-disable react/display-name */
3+
/* eslint-disable no-confusing-arrow */
4+
5+
/**
6+
* Setup i18n in tests
7+
*
8+
* Docs
9+
* @see https://react.i18next.com/misc/testing
10+
*
11+
* Inspired by
12+
* @see https://github.com/i18next/react-i18next/blob/552ed79036c28f282afe7c6ccb525b82b76e71d5/example/test-jest/src/__mocks__/react-i18next.js
13+
*
14+
* Alternative examples using `i18n.use()...`
15+
* @see https://github.com/i18next/react-i18next/blob/552ed79036c28f282afe7c6ccb525b82b76e71d5/example/test-jest/src/setupTests.js#L4-L23
16+
* @see https://github.com/i18next/react-i18next/blob/552ed79036c28f282afe7c6ccb525b82b76e71d5/test/i18n.js
17+
* @see https://github.com/isaachinman/next-i18next/issues/377#issuecomment-700516821
18+
*/
19+
20+
const React = require('react')
21+
const reactI18next = require('react-i18next')
22+
23+
const hasChildren = node =>
24+
node && (node.children || (node.props && node.props.children))
25+
26+
const getChildren = node =>
27+
node && node.children ? node.children : node.props && node.props.children
28+
29+
const renderNodes = reactNodes => {
30+
if (typeof reactNodes === 'string') {
31+
return reactNodes
32+
}
33+
34+
return Object.keys(reactNodes).map((key, i) => {
35+
const child = reactNodes[key]
36+
const isElement = React.isValidElement(child)
37+
38+
if (typeof child === 'string') {
39+
return child
40+
}
41+
if (hasChildren(child)) {
42+
const inner = renderNodes(getChildren(child))
43+
return React.cloneElement(child, { ...child.props, key: i }, inner)
44+
}
45+
if (typeof child === 'object' && !isElement) {
46+
return Object.keys(child).reduce(
47+
(str, childKey) => `${str}${child[childKey]}`,
48+
'',
49+
)
50+
}
51+
52+
return child
53+
})
54+
}
55+
56+
/**
57+
* @type any
58+
*/
59+
const useMock = [k => k, {}]
60+
useMock.t = k => k
61+
useMock.i18n = {}
62+
63+
module.exports = {
64+
// this mock makes sure any components using the translate HoC receive the t function as a prop
65+
withTranslation: () => Component => props => (
66+
<Component t={k => k} {...props} />
67+
),
68+
Trans: ({ children }) =>
69+
Array.isArray(children) ? renderNodes(children) : renderNodes([children]),
70+
Translation: ({ children }) => children(k => k, { i18n: {} }),
71+
useTranslation: () => useMock,
72+
73+
// mock if needed
74+
I18nextProvider: reactI18next.I18nextProvider,
75+
initReactI18next: reactI18next.initReactI18next,
76+
setDefaults: reactI18next.setDefaults,
77+
getDefaults: reactI18next.getDefaults,
78+
setI18n: reactI18next.setI18n,
79+
getI18n: reactI18next.getI18n,
80+
}

cypress.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"baseUrl": "http://localhost:3000"
2+
"baseUrl": "http://localhost:3000",
3+
"video": false
34
}

jest.setup.ts

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
/* eslint-disable @typescript-eslint/ban-ts-comment */
22
/* eslint-disable import/no-extraneous-dependencies */
33
import 'jest-preset-ns/presets/react/jest-setup.js'
4-
54
import { setConfig } from 'next/config'
65
import { PHASE_DEVELOPMENT_SERVER } from 'next/constants'
7-
import i18n from 'i18next'
8-
import { initReactI18next } from 'react-i18next'
96
import { NextRouter } from 'next/router'
107

118
// @ts-ignore
@@ -22,29 +19,6 @@ const { publicRuntimeConfig, serverRuntimeConfig } = NextConfig(
2219
*/
2320
setConfig({ publicRuntimeConfig, serverRuntimeConfig })
2421

25-
/**
26-
* Setup i18n in tests
27-
*
28-
* @see https://github.com/i18next/react-i18next/blob/552ed79036c28f282afe7c6ccb525b82b76e71d5/example/test-jest/src/setupTests.js#L4-L23
29-
* @see https://github.com/isaachinman/next-i18next/issues/377#issuecomment-700516821
30-
*/
31-
i18n.use(initReactI18next).init({
32-
lng: 'en',
33-
fallbackLng: 'en',
34-
35-
// have a common namespace used around the full app
36-
ns: ['translations'],
37-
defaultNS: 'translations',
38-
39-
// debug: true,
40-
41-
interpolation: {
42-
escapeValue: false, // not needed for react!!
43-
},
44-
45-
resources: { en: { translations: {} } },
46-
})
47-
4822
/**
4923
* mockRouter mocks the initial router state of Next.js
5024
* @see https://github.com/vercel/next.js/issues/7479#issuecomment-752418517

next-env.d.ts

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,3 @@
11
/// <reference types="next" />
22
/// <reference types="next/types/global" />
3-
4-
type NextConfig = {
5-
publicRuntimeConfig: {
6-
NODE_ENV: string
7-
/**
8-
* version of the app
9-
*/
10-
VERSION: string
11-
}
12-
serverRuntimeConfig: Record<string, unknown>
13-
}
14-
15-
declare module 'next/config' {
16-
export declare function setConfig(configValue: any): void
17-
export default function getConfig(): NextConfig
18-
}
3+
/// <reference types="next/image-types/global" />

next.config.js

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,13 @@ const version = require('./version')
1313
* – It should be availabe already: https://github.com/vercel/next.js/blob/canary/packages/next/next-server/server/config-shared.ts#L12
1414
*/
1515
const nextConfig = {
16-
poweredByHeader: false,
17-
/**
18-
* Opt-in to webpack 5 support
19-
* @see https://github.com/vercel/next.js/issues/21679#issuecomment-771941447
20-
*/
21-
future: {
22-
webpack5: true,
16+
eslint: {
17+
// We have manual checks in place to make sure we do not build dangerous
18+
// code.
19+
ignoreDuringBuilds: true,
2320
},
2421
i18n,
22+
poweredByHeader: false,
2523
publicRuntimeConfig: {
2624
NODE_ENV: process.env.NODE_ENV,
2725
VERSION: version,

0 commit comments

Comments
 (0)