Next.js Boilerplate with TypeScript, Tailwind, and GraphQL 🚀

This is a Next.js project bootstrapped with create-next-app.

Todos 👩‍💻

• Animations.
• Testing.

Environment Variables 💁

NEXT_PUBLIC_SITE_URL=https://website.com // used for sitemap generation
NEXT_PUBLIC_DEFAULT_LOCALE=en-US
NEXT_PUBLIC_API=https://graphql.datocms.com
NEXT_PUBLIC_API_TOKEN=5bc901b83d013770d0625e9f39ccc9
NEXT_PUBLIC_TITLE=GraphQL Consumer

Features 🦸

• Typescript - Superset of JavaScript which primarily provides optional static typing, classes and interfaces.
• TailwindCSS - A utility-first CSS framework
• GraphQL - with Apollo
• ESLint - Extended
• Stylelint - Not really used now because of TailwindCSS but it's necessary later.
• Sitemaps - Generated with each build.
• Aliases - Managed from package.json.
• Progress bar - With NProgress.
• Clean and beautiful responsive design.

Utility functions 🛠

• formatDate
• truncate

Folders and files structure 🗺

-   .vscode // local settings for VS Code

-   components // reusable react components

    -   CategoryItem
    -   Footer
    -   Image
    -   Link
    -   PageTitle
    -   PostItem
    -   ReservationDetails
    -   ThemeSwitch
    index.ts // Exports all the public components

    // Each component has the following structure:

    -   -   ComponentName
            -   ComponentName.tsx
            -   index.ts

-   containers

    -   LayoutWrapper
    -   SectionContainer

-   DUMMY_DATA

    -   allArticles.json
    -   article.json

-   lib // helpers

    -   queries
        -   posts // all posts and the single post queries
    - apolloClient.ts
    -   helpers.ts

-   pages

    -   posts
        -   [slug].tsx
    -   _app.tsx
    -   _document.tsx // to add custom font and favicons
    -   index.tsx

-   public

    -   media/favicons

-   styles

    -   global.scss // imports tailwind

-   Types // Just the global types
    -   Elements.ts
    -   Pages.ts
    -   Posts.ts

-   .env
-   .eslintignore
-   .eslintrc.js
-   .prettierignore
-   .prettierrc
-   .stylelintrc
-   babel.config.json // adds "plugin-proposal-export-default-from"
-   next-env.d.ts
-   next-sitemap.js // sitemaps configuration
-   next.config.js
-   package-lock.json
-   package.json
-   postcss.config.js
-   README.md
-   tailwind.config.js
-   tsconfig.json

Dependencies that were added 👷🏼‍♀️

Production

• @apollo/client
• graphql
• next-sitemap
• next-themes
• nprogress
• react-markdown
• remove-markdown

Development

• @babel/core
• @babel/eslint-parser
• @babel/plugin-proposal-class-properties
• @babel/plugin-proposal-export-default-from
• @babel/plugin-syntax-dynamic-import
• @babel/plugin-transform-modules-commonjs
• @babel/plugin-transform-react-constant-elements
• @babel/plugin-transform-react-inline-elements
• @babel/preset-env
• @babel/preset-react
• @babel/register
• @tailwindcss/typography
• @types/nprogress
• @types/remove-markdown
• ajv
• autoprefixer
• eslint
• eslint-config-airbnb
• eslint-config-airbnb-base
• eslint-config-next
• eslint-config-prettier
• eslint-import-resolver-alias
• eslint-import-resolver-webpack
• eslint-plugin-import
• eslint-plugin-jsx-a11y
• eslint-plugin-prettier
• eslint-plugin-react
• eslint-plugin-react-hooks
• postcss
• postcss-scss
• prettier
• sass
• stylelint
• stylelint-config-standard
• stylelint-config-standard-scss
• stylelint-scss
• stylelint-webpack-plugin
• tailwindcss

How to launch the project 🏁

Install Node.js and then open the Terminal/CMD and navigate to the project's folder. Run the following command:

npm insatll

Development evnironment

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

Stay safe 😷