Next 9

This is a demonstration of Next.js 9 features.

About

Next.js is a fantastic framework that allows us to build performant server-side rendered React apps with ease.

In this repo, you will find ways how you can utilize the powerful features of Next.js 9, like API routes and Static Site Generation (SSG) to build full-stack React apps.

Also, it use Auth0 to handle user authentication and authorization, and also Chakra UI component library is integrated for better look. into our Next.js project to make it a breeze to build beautiful and modularized user interfaces

To run

To run this project you'll need:

yarn
node

docker

If you want try authorisation page please setup .env file wit Auth0 credentials. See how to do this in Auth0 section.

Yarn

To start development server simply type following in your terminal:

yarn dev

All other scripts you'll find under Scripts section.

Docker

To start production ready server with docker run:

docker build -t next9 . && docker run -p 3000:3000 --name next9 next9

Now you can open the app in your browser http://localhost:3000/

Auth0

This section is optional. It's needed to enable a secret page (protected by auth0).

Create an env file with following records, you can get these here at Application > <Your app> > Basic Information:

AUTH0_DOMAIN - domain for auth0 server
AUTH0_CLIENT_ID - id of auth0 client;
AUTH0_CLIENT_SECRET - secret for auth0 client;
SESSION_COOKIE_SECRET - to encrypt cookies. You can generate one with
```
openssl rand -base64 32
```

You need also specify Application URIs in Application > <Your app> > Application URIs. You will need set Allowed Callback URLs to http://localhost:3000/api/callback.
Also, we need to set Allowed Logout URLs to http://localhost:3000/secret

Routes

There is complete list of all routes:

/home - displays home page
/about - displays about page
/about/me - displays nested route
/user/:id - displays dynamic route when id is specified. It also can parse parameters queries. Try
```
http://localhost:3000/user/1?action=create&darkmode=false
```
or if this id doesn't exist you'll become an error. Try
```
http://localhost:3000/user/100?action=create&darkmode=false
```
/secret - some secret. User needs to be logged in to see it. (Needs .env file)

Endpoints

There is complete list of all endpoints:

Endpoint	Method	Params	Description
`/api/hello`	`GET`	-	Returns hello message
`/api/user/:id`	`GET`	`id` of type `Number`	Returns info about user with `id`
`/api/callback`	`GET`	`code` and `state` as query	Handles callback from `auth` service
`/api/login`	`GET`	-	Starts login process
`/api/logout`	`GET`	-	Starts logout process

Scripts

In the project directory, you can run:

`yarn dev`

Runs the next app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

`yarn build`

Builds the next app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified, and the filenames include the hashes.
Your app is ready to be deployed!

`yarn start`

Runs the next app in the production mode.

`yarn export`

Exports the next app as static version of the site to out directory.

Technologies

React
Next
Chakra UI
SWR
Auth0

Contribute

Fork it (https://github.com/sierikov/prisma/fork)
Create your feature branch (git checkout -b feature/fooBar)
Commit your changes (git commit -am 'Add some fooBar')
Push to the branch (git push origin feature/fooBar)
Create a new Pull Request

sierikov/next9