Zenn
Open6

Next.js環境構築メモ @ Neovim

botamotchbotamotch

nvmを事前にインストールした状態。

yarnとその他Language Serverをインストールする

$ nvm ls
       v18.16.0
->     v18.17.0
default -> lts/* (-> v18.17.0)

$ npm install -g yarn
$ npm install -g typescript-language-server typescript
$ npm install -g @tailwindcss/language-server
botamotchbotamotch

nvim-lspconfig , princejoogie/tailwind-highlight.nvimをインストール。

Denoと共存できるように設定追加。filetypesとかもうちょっとちゃんと考えたほうがいい。

検索するとTailwind-highliht.nvim Alternativeみたいなのが出てくるので変えるかも。

.config/nvim/init.lua
use 'neovim/nvim-lspconfig'
use "princejoogie/tailwind-highlight.nvim"

require('lspconfig').denols.setup({
  root_dir = require('lspconfig').util.root_pattern("deno.json"),
})
require('lspconfig').tsserver.setup({
  root_dir = require('lspconfig').util.root_pattern("package.json"),
})
require('lspconfig').tailwindcss.setup({
  on_attach = function(client, bufnr)
    -- rest of you config
    require('tailwind-highlight').setup(client, bufnr, {
      single_column = false,
      mode = 'background',
      debounce = 200,
    })
  end
})
botamotchbotamotch

プロジェクトのセットアップ

$ yarn create next-app --typescript my-app
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-next-app@13.4.19" with binaries:
      - create-next-app
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias? … No
...

$ cd my-app
$ yarn add -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
tailwind.config.ts
import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}
export default config
app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;