How to use `@element/react` with Next.js

Next.js is a fantastic next generation React Framework that makes things like server-side and static rendering a breeze! We highly recommend making use of the plethora of features that Next.js brings to the table.

By combining Next.js with Element, your development will move at lightning speed :zap:!

Note: This document assumes you're using Next.js 9.4 or newer.

Create your app
```
npx create-next-app super-cool-app
cd super-cool-app
```
The create-next-app CLI will provide you with options on if you would like an empty starter app or if you would like to model it off one of their examples. Choose whichever you prefer, it doesn't affect how you use Element.
Recommendation: The app that create-next-app generates will have a /pages and possibly a /components directory at the root of the project. Many developers prefer to separate their source code inside of a /src directory. Next.js supports this out of the box. You can just create a /src directory at the root of the project and drag /pages and /components inside of it. Your app will run exactly the same as it did before!
Note: The /public directory should not be put inside /src
Create an .npmrc file pointing to Element

Add @element/react as a dependency of your project:

# Install with yarn
yarn add @element/react

# Or install with NPM
npm i @element/react

Render a Element component

You could pick any component, but as an example, let's try the LoginForm

Open the src/pages/index.js file (or if you elected not to create a /src directory, that would be pages/index.js).
Import the LoginForm, LoginPage, and LegalFooter components from @element/react
```
import {LoginForm, LoginPage, LegalFooter} from '@element/react'
```

Make the Home component render a LoginPage component

import React from 'react'
import {LoginForm, LoginPage, LegalFooter} from '@element/react'

export default function Home() {
  return (
    <LoginPage>
      <LoginForm onLogin={() => {}} />
      <LegalFooter />
    </LoginPage>
  )
}

Run the app!
```
yarn dev
```
- Look! A login page!
- But it doesn't look very refined, what happened!?
- You've imported the Element JavaScript code, but not the Element SCSS

Install sass

# Install with yarn
yarn add sass

# Or install with NPM
npm i sass

Tell Next.js where to look for the Element styles

Create a next.config.js file at the root of your project with the following contents:

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'node_modules')],
  },
}

Import Element styles as Global styles
Next.js automatically compiles any SCSS file imported from a page as a CSS module. That's usually very beneficial, but it doesn't work for Element because our class names have already been applied to our React components.
If you attempted to @use one of the Element stylesheets from an SCSS file imported in one of your pages, you would get an error telling you:
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.
So that's what we have to do.
1. Create the file src/pages/_app.js:
```
import App from 'next/app'
import './_app.scss'
export default App
```
2. Then create src/pages/_app.scss:
```
@use '@element/react/LoginForm';
```
Run the app again!
```
yarn dev
```

Next Steps

You've used Element to create a beautiful login page, but what's next?

Element Style System

We just got the Element styles imported into your project, but we didn't take any steps to configure those styles. If your use case calls for customizing Element styles, please see our style system documentation.

Add additional functionality to `LoginForm`

You probably noticed that the "log in" button on our login form doesn't do anything and that it doesn't have any forgot password or sign up functionality. Let's fix that!

The LoginForm component accepts several additional props to customize its functionality. Two of those are onForgotPassword, and onSignUp. Each of those props accepts a callback function. Passing them might look something like this:

<LoginPage>
  <LoginForm
    onLogin={(u, p) => alert(`username: ${u}\npassword: ${p}`)}
    onSignUp={() => alert('SignUp called')}
    onForgotPassword={() => alert('ForgotPassword called')}
  />
  <LegalFooter />
</LoginPage>

Notice that after you pass those props, buttons for forgot password and sign up have magically appeared on your page in an intelligent fashion, neat!

Internationalization

Finally, in many applications it's important to be able to translate the UI into different languages. Element React supports this through props. Every string that's displayed on the screen has a corresponding prop that allows you to pass an overriding value.

For example, try passing these two props:

<LoginForm usernameLabel="Name of the user" passwordLabel="Word of the pass" />

How to use @element/react with Next.js

Next Steps

Element Style System

Add additional functionality to LoginForm

Internationalization

How to use `@element/react` with Next.js

Add additional functionality to `LoginForm`