WaggleBee App

Set up custom server

A custom Next.js server allows you to start a server 100% programmatically in order to use custom server patterns. Most of the time, you will not need this – but it's available for complete customization.

Custom App

Next.js uses the App component to initialize pages. You can override it and control the page initialization. We want to use custom app for

• Persisting layout between page changes
• Keeping state when navigating pages
• Add global CSS

To override the default App, create the file ./pages/_app.js

Build UIs with Semantic UI React

• Container - A container limits content to a maximum width.

Styling

Progress Bar while changing from page to page

In Navbar.js

function Layout() {
  Router.onRouteChangeStart = () => nprogress.start();
  Router.onRouteChangeComplete = () => nprogress.done();
  Router.onRouteChangeError = () => nprogress.done();

  return (
    /* */
  );
}

Progress bar style sheet is located in /public/nprogress.css