Next.js / Ant Design / Emotion Boilerplate

Routing

Routing in Next.js is based on the file system, so ./pages/index.js maps to the / route and ./pages/about.js would map to /about.

The ./static directory maps to /static in the next server, so you can put all your other static resources like images or compiled CSS in there.

Out of the box, we get:

• Automatic transpilation and bundling (with webpack and babel)
• Hot code reloading
• Server rendering and indexing of ./pages
• Static file serving. ./static/ is mapped to /static/

Read more about Next's Routing

Available Scripts

In the project directory, you can run:

yarn run dev

Runs the 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 errors in the console.

yarn run build

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

yarn run start

Starts the application in production mode. The application should be compiled with `next build` first.

See the section in Next docs about deployment for more information.

Fetching Data

You can fetch data in pages components using getInitialProps like this:

./pages/stars.js

const Page = props => <div>Next stars: {props.stars}</div>;

Page.getInitialProps = async ({ req }) => {
  const res = await fetch('https://api.github.com/repos/zeit/next.js');
  const json = await res.json();
  const stars = json.stargazers_count;
  return { stars };
};

export default Page;

For the initial page load, getInitialProps will execute on the server only. getInitialProps will only be executed on the client when navigating to a different route via the Link component or using the routing APIs.

Note: getInitialProps can not be used in children components. Only in pages.

Read more about fetching data and the component lifecycle

---

MIT License.

---