├── src └── pages │ ├── api │ └── whois.js │ ├── index.js │ ├── whois │ └── [domain].js │ └── _app.js ├── jsconfig.json ├── next.config.js ├── .devcontainer └── devcontainer.json ├── .gitignore ├── package.json └── README.md /src/pages/api/whois.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./src/*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | export default function Home() { 2 | return ( 3 |
恭喜运行成功
4 | ); 5 | } 6 | -------------------------------------------------------------------------------- /src/pages/whois/[domain].js: -------------------------------------------------------------------------------- 1 | export default function Whois() { 2 | return ( 3 |
假装有个详情页
4 | ); 5 | } 6 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /src/pages/_app.js: -------------------------------------------------------------------------------- 1 | import { ChakraProvider } from '@chakra-ui/react' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return ( 5 | 6 | 7 | 8 | ) 9 | } 10 | 11 | export default MyApp 12 | -------------------------------------------------------------------------------- /.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Node.js", 3 | "image": "mcr.microsoft.com/devcontainers/javascript-node:0-18-bullseye", 4 | "features": { 5 | "ghcr.io/devcontainers-contrib/features/jshint:2": {} 6 | }, 7 | "settings": { 8 | "terminal.integrated.shell.linux": "/bin/bash" 9 | }, 10 | "extensions": [ 11 | "dbaeumer.vscode-eslint" 12 | ], 13 | "postCreateCommand": "npm install && npm run dev", 14 | "forwardPorts": [ 15 | 3000 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | .idea/ 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "whois", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@chakra-ui/icons": "^2.1.1", 13 | "@chakra-ui/next-js": "^2.2.0", 14 | "@chakra-ui/react": "^2.8.2", 15 | "@emotion/react": "^11.11.1", 16 | "@emotion/styled": "^11.11.0", 17 | "framer-motion": "^10.16.12", 18 | "next": "14.0.3", 19 | "react": "^18", 20 | "react-dom": "^18" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 现在要用 Next.js 与 chakra.ui 建`whois`站，类似网站示例：https://whois.gantrol.com 2 | 3 | 目标演示如何是用最少、必要的知识，快速开发、部署一个网站。 4 | 5 | 相关账号： 6 | 7 | - [Vercel注册](https://vercel.com/signup) 8 | - [Github注册](https://github.com/join) 9 | 10 | > 这两个网站的注册过程可参考：[不用开发，如何 10 分钟上线一个 AI 产品](https://mp.weixin.qq.com/s/N0Puxv0X2D6eC5q_Ps8uLQ) 11 | 12 | [ChatGPT](https://chat.openai.com/)账号可选。 13 | 14 | 目前进度：完成基本设计、搭建项目框架。你可以： 15 | 16 | - 部署到 Vercel： [![部署到 Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/gantrol/whois-nextjs&project-name=whois-nextjs&repository-name=whois-nextjs) 17 | - 用Github在线编辑器打开：[![用Github在线编辑器打开](https://github.com/codespaces/badge.svg)](https://codespaces.new/gantrol/whois-nextjs) 18 | - fork 为自己的项目（注意修改上述两个按钮的链接） 19 | 20 | 后续步骤（对应节点链接，均可一键开发或部署）： 21 | 22 | 1. [实现主页](https://github.com/gantrol/whois-nextjs/tree/step1) 23 | 2. [实现后端接口（转发freeaiapi）](https://github.com/gantrol/whois-nextjs/tree/step2) 24 | 3. [实现搜索结果页](https://github.com/gantrol/whois-nextjs/tree/step3) 25 | 4. [实现缓存](https://github.com/gantrol/whois-nextjs/tree/step4) 26 | 27 | ## 基本分析 28 | 29 | ### 用户案例 30 | 31 | 假设用户想要一个带 gantrol 的域名，比较想要 gantrol.com，用户主要想得到什么情报呢？ 32 | 33 | - 这个域名的信息，最主要的是，有没有被注册、是否能买到 34 | - 有没有相关域名可以注册 35 | 36 | ### 界面概设 37 | 38 | - 主页主体是Google极简风格的搜索框，商标位置先用文字“域名搜索”替代 39 | - 用户搜索`gantrol.com` 后，网站跳转到`/whois/gantrol.com`，然后页面顶端是搜索框，其下是具体的域名信息 40 | 41 | ### 外部api 42 | 43 | ```markdown 44 | https://whois.freeaiapi.xyz/?name=${name}&suffix=${suffix} 45 | ``` 46 | 47 | 示例：要查询 gantrol.com，被拆分为 http://whois.freeaiapi.xyz/?name=gantrol&suffix=com ，点击链接即可访问 48 | 49 | 请求的返回分为两种： 50 | 51 | - available = true 52 | 53 | ```json 54 | { 55 | "status": "ok", 56 | "name": "gantrol", 57 | "suffix": "com", 58 | "domain": "gantrol.com", 59 | "creation_datetime": "2020-10-29T04:08:52Z", 60 | "expiry_datetime": "2024-10-29T04:08:52Z", 61 | "available": false, 62 | "info": " Domain Name: GANTROL.COM\r\n Registry Domain ID: 2568931463_DOMAIN_COM-VRSN\r\n Registrar WHOIS Server: whois.paycenter.com.cn\r\n 《省略几百词》 .\r\n" 63 | } 64 | ``` 65 | 66 | - available = false 67 | 68 | ```json 69 | { 70 | "status": "ok", 71 | "name": "gantrol", 72 | "suffix": "org", 73 | "domain": "gantrol.org", 74 | "creation_datetime": "", 75 | "expiry_datetime": "", 76 | "available": true, 77 | "info": "Domain not found.\r\n>>> Last update of WHOIS database: 2023-12-05T08:58:08Z <<<\r\n\r\nTerms of Use:..《省略几百词》.\r\n" 78 | } 79 | ``` 80 | 81 | ## 核心代码文件 82 | 83 | > 目前为代码结构框架，会在其他分支更新代码 84 | 85 | - src/pages/index.js：网站主页 86 | - src/pages/api/whois.js：后端接口，用于转发外部接口 87 | - src/pages/whois/[domain].js：搜索详情页 88 | 89 | --------------------------------------------------------------------------------