Skip to content

02.setup.md

Latest commit

 

History

History
75 lines (53 loc) · 1.83 KB

02.setup.md

File metadata and controls

75 lines (53 loc) · 1.83 KB
Raw

Learn Next.js

02. Setup of the evinronment

  1. Create a new Next.js project with Typescript (docs)
$ npx create-next-app@latest --typescript
  1. Add TailwindCSS as described in the docs and the following plugins:
  1. install NPM packages with they're own TS typings:
  • LowDB
$ npm i lowdb
$ npm i -D @types/lowdb
  • uuid
$ npm i uuid
$ npm i -D @types/uuid
  • sanitize-html
$ npm i sanitize-html
$ npm i -D @types/sanitize-html
  • cors
$ npm i cors
$ npm i -D @types/cors
  1. now we can remove some parts of the starting boilerplate that aren't needed anymore, starting from the CSS
  • delete styles/Home.module.css
  • delete the CSS module import and the classNames from pages/index.tsx

  1. Just to check if at this point everything is fine, just add className="container mx-auto py-5" to the top level <div> tag in pages/index.tsx. You should see the content centered in the page

  2. To set the theme for DaisyUI we need to ad an attribute to the <html> tag but we don't have any .html file... in that case Next.js offers us a speciale file, so let's create an pages/_document.tsx and the following content from the docs plus the DaisyUI theme attribute

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html data-theme="corporate">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Now we have everything in place to start moving to next chapters...