Home

Hello Next

Getting started

npx create-next-app will create a next app. Using --example blog-starter will show an example with a blog.

Change into directory and run yarn dev.

Setting up TypeScript

touch tsconfig.json && yarn add --dev typescript @types/react

Adding Treat

yarn add treat react-treat

You then need to update the next.config.js file:

// start of file const TreatPlugin = require('treat/webpack-plugin'); // within webpack config object if (isServer) { config.plugins.push( new TreatPlugin({ outputCSS: false, }), ); } else { config.plugins.push(new TreatPlugin()); }

Create a theme:

// theme.treat.js // ** THIS CODE WON'T END UP IN YOUR BUNDLE! ** import { createTheme } from 'treat'; export default createTheme({ brandColor: 'blue', grid: 4, });

Now import the styles:

// App.js import React from 'react'; import { TreatProvider } from 'react-treat'; import theme from './theme.treat.js'; export const App = () => <TreatProvider theme={theme}>...</TreatProvider>;

Repository

https://github.com/okeeffed/developer-notes-nextjs/content/next/hello-next

Sections


Related