Configuration of tsconfig.json

This setting is for Typescript rather than Next.js. First of all, regarding the compilation options of sxastarter, the default settings are as follows.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "components/*": ["src/components/*"],
      "lib/*": ["src/lib/*"],
      "temp/*": ["src/temp/*"],
      "assets/*": ["src/assets/*"],
      "graphql-types": ["node_modules/@types/graphql-let/__generated__/__types__"],
      "react": ["node_modules/react"]
    },

This allows the path to be explicitly described without having to write src every time, and it also increases the visibility of the code.

The recent default values for Next.js are as follows

    "paths": {
      "@/*": ["./src/*"]
    }

Therefore, we will correct the paths in the code for individual components, etc., so that the @/components description will work. First, the following changes were made to tsconfig.json.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "components/*": ["src/components/*"],
      "lib/*": ["src/lib/*"],
      "temp/*": ["src/temp/*"],
      "graphql-types": ["node_modules/@types/graphql-let/__generated__/__types__"],
      "react": ["node_modules/react"],
      "@/*": ["./src/*"]
    },

Since it would be time-consuming to change the paths to the existing code, we will leave components, lib and temp as they are, and change the assets folder as in the Next.js TailwindCSS sample, with the folder src\tailwindcss\src\styles as in the TailwindCSS sample in Next.js.

For this reason, rewrite the following in src\tailwindcss\src\pages\_app.tsx, where the stylesheet is loaded, so that it can be loaded under a new path.

import '@/styles/globals.css';

Summary

Personally, I made this change, albeit simple, in the form of wanting to be able to use the default @/ in Next.js. If you are writing code under src, it would be a good idea to make this change.

Tags

• Next.js