Allow more methods as getStaticPaths, getStaticProps, getServerSidePr…

…ops + fix examples (#68)

README.md

@@ -105,7 +105,7 @@ const title = t('common:title')
 
 - `yarn add next-translate`
 
-**\*Note**: For a Next.js version below than 9.3.0, use [email protected] or below\*
+**Note**: For a Next.js version below than 9.3.0, use [email protected] or below
 
 In your **package.json**:
 

__tests__/builder.test.js

@@ -72,9 +72,7 @@ describe('builder', () => {
 
  expect(pages_.equals(pages)).toBe(false)
  expect(pages.toString()).toContain('I18nProvider')
- expect(pages.toString()).toContain(
- 'Page.getInitialProps = C.getInitialProps'
- )
+ expect(pages.toString()).toContain('Page = Object.assign(Page, { ...C })')
  })
  })
 })

cli/builder.js

@@ -96,7 +96,7 @@ export default function Page(p){
  )
 }
 
-Page.getInitialProps = ${isTypeScript ? '(C as any)' : 'C'}.getInitialProps
+Page = Object.assign(Page, { ...${isTypeScript ? '(C as any)' : 'C'} })
 `
 }
 

examples/static-site/components/header.js

@@ -3,6 +3,8 @@ import Head from 'next/Head'
 import Link from 'next/link'
 import useTranslation from 'next-translate/useTranslation'
 
+import styles from './header.module.css'
+
 export default function Header() {
  const { t, lang } = useTranslation()
  const title = t('common:title')
@@ -15,7 +17,7 @@ export default function Header() {
  </title>
  <link rel="icon" href="/favicon.ico" />
  </Head>
- <header>
+ <header className={styles.header}>
  <h1>{title}</h1>
  {lang !== 'es' && (
  <Link href="/es">
@@ -33,14 +35,6 @@ export default function Header() {
  </Link>
  )}
  </header>
- <style jsx>
- {`
- header {
- display: flex;
- flex-direction: column;
- }
- `}
- </style>
  </>
  )
 }

examples/static-site/components/header.module.css

@@ -0,0 +1,4 @@
+.header {
+ display: flex;
+ flex-direction: column;
+}

examples/static-site/package.json

@@ -8,7 +8,7 @@
  "i18n": "node ../../cli/builder.js"
  },
  "dependencies": {
- "next": "link:../../node_modules/next",
+ "next": "9.3.0",
  "next-translate": "link:../../",
  "react": "link:../../node_modules/react",
  "react-dom": "link:../../node_modules/react-dom"

examples/static-site/pages_/_app.js

@@ -1,36 +1,7 @@
 import React from 'react'
 
-function Layout(props) {
- return (
- <>
- {props.children}
- <style jsx global>{`
- body {
- display: flex;
- flex-direction: column;
- align-items: center;
- font-size: 18px;
- font-weight: 400;
- line-height: 1.8;
- background-color: #fafafa;
- color: #212121;
- font-family: sans-serif;
- }
- h1 {
- font-weight: 700;
- }
- p {
- margin-bottom: 10px;
- }
- `}</style>
- </>
- )
-}
+import '../styles.css'
 
 export default function MyApp({ Component, pageProps }) {
- return (
- <Layout>
- <Component {...pageProps} />
- </Layout>
- )
-}
+ return <Component {...pageProps} />
+}

examples/static-site/pages_/more-examples/index.js

@@ -21,7 +21,7 @@ export default function MoreExamples() {
  <PluralExample />
  <Trans
  i18nKey="more-examples:example-with-html"
- components={[<Component />, <b className="red" />]}
+ components={[<Component />, <b style={{ color: 'red' }} />]}
  />
  <NoFunctionalComponent />
  <br />
@@ -30,11 +30,6 @@ export default function MoreExamples() {
  <Link href={`/${lang}/more-examples/dynamic-namespace`}>
  <a>{t('more-examples:dynamic-namespaces-link')}</a>
  </Link>
- <style jsx>{`
- .red {
- color: red;
- }
- `}</style>
  </>
  )
 }

examples/static-site/styles.css

@@ -0,0 +1,17 @@
+body {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ font-size: 18px;
+ font-weight: 400;
+ line-height: 1.8;
+ background-color: #fafafa;
+ color: #212121;
+ font-family: sans-serif;
+}
+h1 {
+ font-weight: 700;
+}
+p {
+ margin-bottom: 10px;
+}

examples/with-server/components/header.js

@@ -3,6 +3,8 @@ import Head from 'next/Head'
 import Link from 'next/link'
 import useTranslation from 'next-translate/useTranslation'
 
+import styles from 'header.module.css'
+
 export default function Header() {
  const { t, lang } = useTranslation()
  const title = t('common:title')
@@ -15,7 +17,7 @@ export default function Header() {
  </title>
  <link rel="icon" href="/favicon.ico" />
  </Head>
- <header>
+ <header className={styles.header}>
  <h1>{title}</h1>
  {lang !== 'es' && (
  <Link href="/" as="/es">
@@ -33,14 +35,6 @@ export default function Header() {
  </Link>
  )}
  </header>
- <style jsx>
- {`
- header {
- display: flex;
- flex-direction: column;
- }
- `}
- </style>
  </>
  )
 }

examples/with-server/components/header.module.css

@@ -0,0 +1,4 @@
+.header {
+ display: flex;
+ flex-direction: column;
+}

examples/with-server/package.json

@@ -7,7 +7,7 @@
  "dev": "node server.js"
  },
  "dependencies": {
- "next": "link:../../node_modules/next",
+ "next": "9.3.0",
  "next-translate": "link:../../",
  "react": "link:../../node_modules/react",
  "express": "4.17.1",

examples/with-server/pages/more-examples/index.js

@@ -19,7 +19,7 @@ export default function MoreExamples() {
  <PluralExample />
  <Trans
  i18nKey="more-examples:example-with-html"
- components={[<Component />, <b className="red" />]}
+ components={[<Component />, <b style={{ color: 'red' }} />]}
  />
  <NoFunctionalComponent />
  <br />
@@ -45,11 +45,6 @@ export default function MoreExamples() {
  >
  <a>{t('more-examples:different-namespaces-link-dynamic')}</a>
  </Link>
- <style jsx>{`
- .red {
- color: red;
- }
- `}</style>
  </>
  )
 }

package.json

@@ -1,6 +1,6 @@
 {
  "name": "next-translate",
- "version": "0.10.0",
+ "version": "0.10.1",
  "description": "Next.js utility to translate pages without the need of a server (static i18n pages generator).",
  "license": "MIT",
  "keywords": [