It is no secret that creating single-page JavaScript applications can be pretty challenging these days. Fortunately, there are some projects available which simplify things and help you build apps faster.

we can access page with http://localhost:3000/about.After that, we need to connect these pages. We could use an HTML "a" tag for that. However, it won t perform client-side navigation; it navigates to the page via the server, which is not what we want. In order to support client-side navigation, we need to use Next.js Link API, which is exported via next/link.

We know that Next.js is all about pages. We can create a page by exporting a React component, and putting that component inside the pages directory. Then it will have a fixed URL based on the file name. Since exported pages are JavaScript modules, we can import other JavaScript components into them as well.

we know how to create a basic Next.js app with multiple pages. In order to create a page, we have to create an actual file on the disk. However, in a real app, we need to create pages dynamically in order to display dynamic content. There are many approaches to do that with Next.js.

we usually need to fetch data from a remote data source. Next.js comes with a standard API to fetch data for pages. We do it using an async function called getInitialProps.

For a React app, there are many different techniques that we can use to style it, and those can be categorized into two broad methods: 1. Traditional CSS-file-based styling (including SASS, PostCSS etc) 2. CSS in Js styling

You can deploy a Next.js app to anywhere you can run Node.js. So, theres not any kind of lock-in, even though deploying with ▲ZEIT Now is super simple.