This is a followup post to this other one.
~The project is still under construction / WIP~. UPDATE: it's not. Project parameters changed and I pivoted away. Nevertheless: Rough notes t the time (it's slightly outdated, next-wise):
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, next
yields 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.)/styles
folder and within it your core css/scss file for customizing and importing the css library of your choice. e.g. a theme.scss
file to customize bulma. You get the general idea.loading css
next.config.js
file. 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.scss
files, you need node-sass
, and consequently you'll need @zeit/next-sass
.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-graphql setup
@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-unfetch
to 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.
next-with-apollo
to get./lib
folder 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 /pages/_app.js
.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 -context
sub-package.impl apollo graphql client