This is a followup post to this other one. The project is still under construction / WIP. Rough notes on learnings / (mis)understandings / other self-learning goodness thus far:
nextjs is NOT react, it's a react framework by @zeit. Unlike client-side-rendered apps (CSR) such as those built via createreactapp, nextjs is SSR (server-side-rendered) react. That said, it supposedly only uses the SSR when needed (eg first load, for faster time-to-paint and time-to-interaction) then flips to CSR once the client has all the files it needs to take over.
react, react-dom, nextyields nextjs.
if using a cooked css lib like reactstrap for frontend styling
bootstrap, reactstrap=> react bootstrap 4. (Then it it might bleat about jquery, popperjs peer deps; if so, add those.)
if using the raw css library like bootstrap, bulma for frontend styling
node-sass bulma(using bulma as ex.)
/stylesfolder and within it your core css/scss file for customizing and importing the css library of your choice. e.g. a
theme.scssfile to customize bulma. You get the general idea.
next.config.jsfile. All you really need to know about it at this point is that es6 style imports/exports DON'T WORK IN THIS FILE. You have to require stuff in and module.exports stuff out.
@zeit/next-css. See more about that here
.scssfiles, you need
node-sass, and consequently you'll need
at this point, to use both css and scss => to use multiple plugins => you now need
next-compose-plugins, so install that and wire it into ur
next.config.js file too. Interestingly, this is NOT by the @zeit folks; to wit: on the plugin's readme page it literally says:
Provides a cleaner API for enabling and configuring plugins for next.js because the default way next.js suggests to enable and configure plugins can get unclear and confusing when you have many plugins.
other interesting css/ux stuff
@apollo-client, which is a "fully-featured caching GraphQL client with integrations for React, Angular, etc...". It takes the place of libs like @apollo/react-hooks, apollo-cache-in-memory etc. Don't use the litany of libs found in tutorials up to this point in time as those libs will be deprecated at some point. Bonus: Apollo also supports type definitions for TypeScript out of the box, so you don't need to run around installing */types libs :-)
graphql-tag, mainly for turning template strings into graphql ASTs (or more simplistically, the ability to write your gql queries along with your other bits of code).
isomorphic-unfetchto make (graphql) http requests on both server and client side.
to tie all these things together, you need to create a HOC that uses the apollo client and makes a centralised store of query result data available to its child components.
/libfolder in your sourcetree).
export default withData(MyComponent)... Follows you can do so wih the top-level
<App>component. If you don't want to selectively apply the HOC, you can go nuclear and bake it directly into
the next-apollo handshake (how it works)
Next added a new lifecycle method to React:
getInitialProps, within which apollo's
getDataFromTree method is called:
getDataFromTree takes your React tree, determines which queries are needed to render them, and then fetches them all. It does this recursively down the whole tree if you have nested queries. It returns a promise which resolves when the data is ready in your Apollo Client store.
apollo-link-context. See here. It's a Lerna proj so even the github is
apollo-link, the pkg you really want to install is the
impl apollo graphql client