Use React's Context API to simplify the interface

What do you think about using the Context API for configuration and to share next-i18next options? User’s _app.js would transform to something like the following (changes annotated with comments):

import React from 'react'
import App, { Container } from 'next/app'
// import { appWithTranslation } from '../i18n'  this line changes to...
import appWithTranslation from 'next-i18next'

// the user imports configuration from their file
import config from '../i18n'

class MyApp extends App {
  render () {
    const { Component, pageProps } = this.props
    return (
      <Container>
        <Component {...pageProps} />
      </Container>
    )
  }
}

// use config in appWithTranslation
export default appWithTranslation(MyApp, config)

Then references to things like:

import { Link } from '../i18n';

can be changed to something like:

import Link from 'next-i18next'

and we wouldn’t have to wrap our components into functions to store configuration. To me, the interface now feels more “package-like”. Thoughts?

[isaachinman]

@capellini Yes, I agree with that. I’ve created a 1.0 milestone for us to track related work.

[capellini]

On the one hand, I am very excited for the production release.

On the other hand, as this is a large change to the API, this would be a major breaking change, which may be a bit more disruptive to our users post-production release. Major breaking changes happen, so it’s not a show-stopper, but if we could sort it out before then, I think that would be ideal.

I don’t think it would take much effort to create a quick prototype to give you and @kachkaev an idea of what things would look like. If, after seeing it, we decide to not go forward with it, no big deal.