diff --git a/examples/by-frameworks/next-international/.vscode/settings.json b/examples/by-frameworks/next-international/.vscode/settings.json
index 8a8cad81..2267362d 100644
--- a/examples/by-frameworks/next-international/.vscode/settings.json
+++ b/examples/by-frameworks/next-international/.vscode/settings.json
@@ -3,5 +3,5 @@
   "i18n-ally.enabledFrameworks": ["next-international"],
   "eslint.enable": false,
   "i18n-ally.enabledParsers": ["ts"],
-  "i18n-ally.keystyle": "nested"
+  "i18n-ally.keystyle": "flat"
 }
diff --git a/src/extraction/parsers/babel.ts b/src/extraction/parsers/babel.ts
index b14a39e8..b154ef13 100644
--- a/src/extraction/parsers/babel.ts
+++ b/src/extraction/parsers/babel.ts
@@ -15,6 +15,7 @@ export function detect(
   rules: ExtractionRule[] = DefaultExtractionRules,
   dynamicRules: ExtractionRule[] = DefaultDynamicExtractionsRules,
   userOptions: ExtractionBabelOptions = {},
+  customCallExpression?: (path: any, recordIgnore: (path: any) => void) => void,
 ) {
   const {
     ignoredJSXAttributes,
@@ -99,6 +100,7 @@ export function detect(
     },
     // ignore `console.xxx`
     CallExpression(path: any) {
+      if (customCallExpression) customCallExpression(path, recordIgnore)
       const callee = path.get('callee')
       if (!callee.isMemberExpression()) return
       if (isGlobalConsoleId(callee.get('object')))
diff --git a/src/frameworks/next-international.ts b/src/frameworks/next-international.ts
index 4c49ed46..c84de76e 100644
--- a/src/frameworks/next-international.ts
+++ b/src/frameworks/next-international.ts
@@ -1,8 +1,8 @@
-/* eslint-disable no-console */
 import { TextDocument } from 'vscode'
 import { Framework, ScopeRange } from './base'
 import { LanguageId } from '~/utils'
-import { RewriteKeySource, RewriteKeyContext, KeyStyle } from '~/core'
+import { RewriteKeySource, RewriteKeyContext, KeyStyle, Config } from '~/core'
+import { extractionsParsers, DefaultExtractionRules, DefaultDynamicExtractionsRules } from '~/extraction'
 
 class NextInternationalFramework extends Framework {
   id = 'next-international'
@@ -26,6 +26,14 @@ class NextInternationalFramework extends Framework {
     'typescriptreact',
   ]
 
+  supportAutoExtraction = [
+    'javascript',
+    'typescript',
+    'javascriptreact',
+    'typescriptreact',
+    'html',
+  ]
+
   usageMatchRegex = [
     // Basic usage
     '[^\\w\\d]t\\([\'"`]({key})[\'"`]',
@@ -33,6 +41,40 @@ class NextInternationalFramework extends Framework {
     '[^\\w\\d]scopedT\\([\'"`]({key})[\'"`]',
   ]
 
+  detectHardStrings(doc: TextDocument) {
+    const lang = doc.languageId
+    const text = doc.getText()
+
+    if (lang === 'html') {
+      return extractionsParsers.html.detect(
+        text,
+        DefaultExtractionRules,
+        DefaultDynamicExtractionsRules,
+        Config.extractParserHTMLOptions,
+        // <script>
+        script => extractionsParsers.babel.detect(
+          script,
+          DefaultExtractionRules,
+          DefaultDynamicExtractionsRules,
+          Config.extractParserBabelOptions,
+        ),
+      )
+    }
+    else {
+      return extractionsParsers.babel.detect(
+        text,
+        DefaultExtractionRules,
+        DefaultDynamicExtractionsRules,
+        {},
+        (path, recordIgnore) => {
+          const callee = path.get('callee')
+          if (callee.node.name === 't' || callee.node.name === 'scopedT')
+            recordIgnore(path)
+        },
+      )
+    }
+  }
+
   refactorTemplates(keypath: string) {
     const keypaths = keypath.split('.').map((_, index, parts) => {
       return parts.slice(parts.length - index - 1).join('.')