A sample app created to learn next.js.
Based on youtube tutorial by Traversy Media (link).
-
$> npm init -y
-
$> npm install next react react-dom
-
Make dir: pages
-
In dir pages: create file: index.js, drop your react component code in it.
-
Start server: $> npx next
-
Hit: http://localhost:3000/, the index.js contents should show there.
-
In dir pages: create file: about.js, again, drop your component code in it.
-
Hit: http://localhost:3000/about, the about page contents should be there.
-
That's nice, next does the routing for you, based on page js file names.
-
Make dir: components, create your additional react components there.
-
I added a Nav.js there for navigation.
-
Also, added Layout.js as a template for pages. added link to bootstrap css in it.
-
Notice the "Head" component in next.js. it lets you add arbitrary tags to be rendered in the head section.
-
Also, used the "Link" component fron next.js. I don't see a big deal. It's just like anchor tag in html. May be there's more to it. The next.js docs have a lot of items on it.
-
Add a static method named "getInitialProps" to Index component. This method is an addon by next.js and is pretty cool. The only trick: it only works for components in pages dir. I banged by head in a lot of frustration as I initially added it to Prices component in components dir.
-
$> npm install isomorphic-unfetch #weird name for a lib
-
Add the price json fetching code to this method. As in the tutorial, I used the coindesk api.
-
Pass on the props from Index to Prices and render the price data there.
