diff --git a/examples/with-storybook/.storybook/main.js b/examples/with-storybook/.storybook/main.js
index 974c2f95aac9f..e717439a8c747 100644
--- a/examples/with-storybook/.storybook/main.js
+++ b/examples/with-storybook/.storybook/main.js
@@ -1,4 +1,8 @@
 module.exports = {
   stories: ['../stories/*.stories.@(ts|tsx|js|jsx|mdx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@next/plugin-storybook',
+  ],
 }
diff --git a/examples/with-storybook/components/index.js b/examples/with-storybook/components/index.js
index 8f5129010b9b0..73021b813f657 100644
--- a/examples/with-storybook/components/index.js
+++ b/examples/with-storybook/components/index.js
@@ -1,3 +1,4 @@
+import sayHello from '@/sayHello'
 export default function Home() {
-  return <div>Hello World</div>
+  return <div>{sayHello()}</div>
 }
diff --git a/examples/with-storybook/jsconfig.json b/examples/with-storybook/jsconfig.json
new file mode 100644
index 0000000000000..ed048cf72bb05
--- /dev/null
+++ b/examples/with-storybook/jsconfig.json
@@ -0,0 +1,9 @@
+// tsconfig.json or jsconfig.json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["utils/*"]
+    }
+  }
+}
diff --git a/examples/with-storybook/package.json b/examples/with-storybook/package.json
index 3b151db4e3b42..c915bc8ec63aa 100644
--- a/examples/with-storybook/package.json
+++ b/examples/with-storybook/package.json
@@ -16,6 +16,7 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@next/plugin-storybook": "10.0.0",
     "@storybook/addon-essentials": "6.0.26",
     "@storybook/addon-links": "6.0.26",
     "@storybook/react": "6.0.26",
diff --git a/examples/with-storybook/utils/sayHello.js b/examples/with-storybook/utils/sayHello.js
new file mode 100644
index 0000000000000..9741b5c9c7632
--- /dev/null
+++ b/examples/with-storybook/utils/sayHello.js
@@ -0,0 +1,5 @@
+// Dummy function used demo module paths aliases
+// @see https://nextjs.org/docs/advanced-features/module-path-aliases
+export default function sayHello() {
+  return 'Hello World'
+}
diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
index 57ec9ec1ba95f..1a658cc7335f0 100644
--- a/packages/next-plugin-storybook/package.json
+++ b/packages/next-plugin-storybook/package.json
@@ -1,5 +1,8 @@
 {
   "name": "@next/plugin-storybook",
+  "exports": {
+    "./": "./dist/"
+  },
   "version": "10.0.4-canary.8",
   "repository": {
     "url": "vercel/next.js",
@@ -7,5 +10,12 @@
   },
   "peerDependencies": {
     "next": "*"
+  },
+  "scripts": {
+    "build": "yarn tsc -d -w -p tsconfig.json"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/node": "14.14.14"
   }
 }
diff --git a/packages/next-plugin-storybook/preset.js b/packages/next-plugin-storybook/preset.ts
similarity index 81%
rename from packages/next-plugin-storybook/preset.js
rename to packages/next-plugin-storybook/preset.ts
index 57f3605ea321b..30d488d56b18e 100644
--- a/packages/next-plugin-storybook/preset.js
+++ b/packages/next-plugin-storybook/preset.ts
@@ -1,7 +1,7 @@
-const { PHASE_PRODUCTION_BUILD } = require('next/constants')
-const { findPagesDir } = require('next/dist/lib/find-pages-dir')
-const loadConfig = require('next/dist/next-server/server/config').default
-const getWebpackConfig = require('next/dist/build/webpack-config').default
+import { PHASE_PRODUCTION_BUILD } from '../next/next-server/lib/constants'
+import { findPagesDir } from 'next/lib/find-pages-dir'
+import loadConfig from 'next/next-server/server/config'
+import getWebpackConfig from 'next/build/webpack-config'
 
 const CWD = process.cwd()
 
@@ -28,7 +28,7 @@ async function webpackFinal(config) {
   config.module.rules = [
     ...config.module.rules.filter((rule) => {
       // the rules we're filtering use RegExp for the test
-      if (!rule.test instanceof RegExp) return true
+      if (!(rule.test instanceof RegExp)) return true
       // use Next.js' built-in CSS
       if (rule.test.test('hello.css')) {
         return false
diff --git a/packages/next-plugin-storybook/tsconfig.json b/packages/next-plugin-storybook/tsconfig.json
new file mode 100644
index 0000000000000..fe1fe67769dad
--- /dev/null
+++ b/packages/next-plugin-storybook/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "outDir": "dist/",
+    "module": "commonjs",
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "target": "es2015",
+    "downlevelIteration": true,
+    "preserveWatchOutput": true
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules", "dist", "./*.d.ts"]
+}
diff --git a/yarn.lock b/yarn.lock
index 3fa154a323e2b..7d8fa4c8bbdec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2798,6 +2798,11 @@
   version "13.1.4"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-13.1.4.tgz#4cfd90175a200ee9b02bd6b1cd19bc349741607e"
 
+"@types/node@14.14.14":
+  version "14.14.14"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.14.tgz#f7fd5f3cc8521301119f63910f0fb965c7d761ae"
+  integrity sha512-UHnOPWVWV1z+VV8k6L1HhG7UbGBgIdghqF3l9Ny9ApPghbjICXkUJSd/b9gOgQfjM1r+37cipdw/HJ3F6ICEnQ==
+
 "@types/node@^10.1.0":
   version "10.17.13"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.13.tgz#ccebcdb990bd6139cd16e84c39dc2fb1023ca90c"
@@ -4122,7 +4127,25 @@ browserify-zlib@^0.2.0:
   dependencies:
     pako "~1.0.5"
 
-browserslist@4.14.6, browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6, browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.14.7, browserslist@^4.3.6, browserslist@^4.6.4, browserslist@^4.8.3, browserslist@^4.8.5:
+browserslist@4.14.6:
+  version "4.14.6"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.6.tgz#97702a9c212e0c6b6afefad913d3a1538e348457"
+  integrity sha512-zeFYcUo85ENhc/zxHbiIp0LGzzTrE2Pv2JhxvS7kpUb9Q9D38kUX6Bie7pGutJ/5iF5rOxE7CepAuWD56xJ33A==
+  dependencies:
+    caniuse-lite "^1.0.30001154"
+    electron-to-chromium "^1.3.585"
+    escalade "^3.1.1"
+    node-releases "^1.1.65"
+
+browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
+  version "1.7.7"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.7.tgz#0bd76704258be829b2398bb50e4b62d1a166b0b9"
+  integrity sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=
+  dependencies:
+    caniuse-db "^1.0.30000639"
+    electron-to-chromium "^1.2.7"
+
+browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.14.7, browserslist@^4.3.6, browserslist@^4.6.4, browserslist@^4.8.3, browserslist@^4.8.5:
   version "4.14.7"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.7.tgz#c071c1b3622c1c2e790799a37bb09473a4351cb6"
   integrity sha512-BSVRLCeG3Xt/j/1cCGj1019Wbty0H+Yvu2AOuZSuoaUWn3RatbL33Cxk+Q4jRMRAbOm0p7SLravLjpnT6s0vzQ==
@@ -4444,11 +4467,21 @@ caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634:
   version "1.0.30001023"
   resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30001023.tgz#f856f71af16a5a44e81f1fcefc1673912a43da72"
 
+caniuse-db@^1.0.30000639:
+  version "1.0.30001168"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30001168.tgz#68dd167176aafa234c5969afe65442d918525cd8"
+  integrity sha512-Nq5zfHhWwS+TlfmNVzlIZqAv790nYSoyNMsfIL/Xd8YUGhYkhlUNLzykOdvQ8TJLVWgmhrG1erYwNevS9hsoxQ==
+
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001020, caniuse-lite@^1.0.30001093, caniuse-lite@^1.0.30001113, caniuse-lite@^1.0.30001157:
   version "1.0.30001157"
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001157.tgz"
   integrity sha512-gOerH9Wz2IRZ2ZPdMfBvyOi3cjaz4O4dgNwPGzx8EhqAs4+2IL/O+fJsbt+znSigujoZG8bVcIAUM/I/E5K3MA==
 
+caniuse-lite@^1.0.30001154:
+  version "1.0.30001168"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001168.tgz#6fcd098c139d003b9bd484cbb9ca26cb89907f9a"
+  integrity sha512-P2zmX7swIXKu+GMMR01TWa4csIKELTNnZKc+f1CjebmZJQtTAEXmpQSoKVJVVcvPGAA0TEYTOUp3VehavZSFPQ==
+
 capitalize@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/capitalize/-/capitalize-1.0.0.tgz#dc802c580aee101929020d2ca14b4ca8a0ae44be"
@@ -6263,6 +6296,11 @@ ejs@^2.6.1:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
 
+electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.585:
+  version "1.3.629"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.629.tgz#a08d13b64d90e3c77ec5b9bffa3efbc5b4a00969"
+  integrity sha512-iSPPJtPvHrMAvYOt+9cdbDmTasPqwnwz4lkP8Dn200gDNUBQOLQ96xUsWXBwXslAo5XxdoXAoQQ3RAy4uao9IQ==
+
 electron-to-chromium@^1.3.591:
   version "1.3.596"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.596.tgz#c7ed98512c7ff36ddcbfed9e54e6355335c35257"
@@ -11152,6 +11190,11 @@ node-notifier@^5.4.2:
     shellwords "^0.1.1"
     which "^1.3.0"
 
+node-releases@^1.1.65:
+  version "1.1.67"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.67.tgz#28ebfcccd0baa6aad8e8d4d8fe4cbc49ae239c12"
+  integrity sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==
+
 node-releases@^1.1.66:
   version "1.1.66"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.66.tgz#609bd0dc069381015cd982300bae51ab4f1b1814"